html中怎样隐藏列,关于jquery：隐藏/显示HTML表中的列

我有一个包含几列的HTML表&＃xff0c;我需要使用jquery实现一个列选择器。 当用户单击复选框时&＃xff0c;我要隐藏/显示表中的相应列。 我想在不将类附加到表中的每个td的情况下执行此操作&＃xff0c;是否可以使用jquery选择整个列&＃xff1f; 以下是HTML的示例。

Header 1Header 2Header 3

Column1Column2Column3Column1Column2Column3Column1Column2Column3Column1Column2Column3

Hide/Show Column 1

Hide/Show Column 2

Hide/Show Column 3

希望以下网站对您有所帮助&＃xff1a;fiendish.demon.co.uk/html/Javascript/hidetablecols.html

我使用jQuery实现了该解决方案&＃xff0c;并且对我来说效果非常好&＃xff1a;http&＃xff1a;//www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html

每个用户344059的评论&＃xff0c;这是断开的链接的Web存档http://www.fiendish.demon.co.uk/html/Javascript/hidetablecols.html

使用jQuery的一行代码隐藏了第二列&＃xff1a;

$(&＃39;td:nth-child(2)&＃39;).hide();

如果您的表具有header(th)&＃xff0c;请使用此命令&＃xff1a;

$(&＃39;td:nth-child(2),th:nth-child(2)&＃39;).hide();

资料来源&＃xff1a;用单行jQuery代码隐藏表格列

jsFiddle测试代码&＃xff1a;http://jsfiddle.net/mgMem/1/

如果您想查看一个好的用例&＃xff0c;请看一下我的博客文章&＃xff1a;

隐藏表列&＃xff0c;并使用jQuery根据值对行着色。

顺便说一句&＃xff0c;在示例中没有&＃xff0c;是否没有忽略colspans的问题&＃xff1f;好&＃xff0c;如果您不使用它们。还有另一个相关问题&＃xff1a;stackoverflow.com/questions/1166452/

我必须将tbody添加到选择器中&＃xff0c;以避免用寻呼机隐藏页脚&＃xff1a;$(。webgrid tbody td&＃xff1a;nth-??child(1)&＃xff0c;.webgrid th&＃xff1a;nth-??child(1))。hide();

&＃64;KimR这可能有助于解决colspan问题stackoverflow.com/questions/9623601/

我不知道为什么&＃xff0c;但是我不得不使用nth-of-type来使其工作。例如&＃xff1a;$(table td&＃xff1a;nth-??of-type(2))。hide();

&＃64;LeopoldoSanczyk您使用的是Safari吗&＃xff1f;似乎需要第n个类型

&＃64;ykay我忘了提及我使用的是Firefox。从日期来看&＃xff0c;是32.0.X还是封闭版本。

&＃64;LeopoldoSanczyk好吧&＃xff0c;我问&＃xff0c;因为当客户要求他的网站在野生动物园工作时&＃xff0c;我碰到了这一点。 Firefox也可能一样

注意&＃xff1a;使用$(.mycol).closest(th).index()获取索引时&＃xff0c;您必须添加1&＃xff0c;因为nth-child从1开始&＃xff01;所以colIdx &＃61; $(.mycol).closest(th).index() &＃43; 1

I would like to do this without attaching a class to every td

就我个人而言&＃xff0c;我会采用"每课时上课/上课/上课"的方法。然后&＃xff0c;您可以通过对容器上的className的一次写操作来打开和关闭列&＃xff0c;并假设样式规则如下&＃xff1a;

table.hide1 .col1 { display: none; }

table.hide2 .col2 { display: none; }

...

这将比任何JS循环方法都要快。对于非常长的表&＃xff0c;它可以对响应能力产生重大影响。

如果可以摆脱不支持IE6的困扰&＃xff0c;则可以使用邻接选择器来避免将类属性添加到tds。或者&＃xff0c;如果您担心使标记更整洁&＃xff0c;则可以在初始化步骤中从Javascript自动添加它们。

感谢您的建议&＃xff0c;我一直想保持HTML的整洁&＃xff0c;但是当表的大小接近100行时&＃xff0c;性能无疑成为一个问题。该解决方案将性能提高了2-5倍。

在性能方面&＃xff0c;这种方法对我来说是个奇迹。谢谢&＃xff01;

我将此添加到css .hidden {display:none;}中并使用了.addClass(hidden)和.removeClass(hidden)&＃xff0c;这比.hide()和.show()快一点。

您可以使用colgroups&＃xff1a;

Header 1Header 2Header 3

Column1Column2Column3Column1Column2Column3Column1Column2Column3Column1Column2Column3

然后&＃xff0c;您的脚本可能只更改了欲望

类。

我似乎记得colgroup没有跨浏览器的支持&＃xff0c;这不再是事实吗&＃xff1f;

也许。我在hilight列上使用此方法&＃xff0c;(firefox&＃xff0c;safari&＃xff0c;chrome正常工作)从未在IE中尝试过。

&＃64;Brian-IE8无法正常工作&＃xff0c;启用IE7的IE8似乎可以正常工作。

在现代浏览器(Chrome和Firefox)中&＃xff0c;这似乎不再起作用

&＃64;JBE&＃xff1a;确切地说&＃xff0c;这在某种程度上可以在现代浏览器中使用。使用$(table > colgroup > col.yourClassHere) jQuery选择器&＃xff0c;您仍然可以像设置整个列的背景色一样设置smth&＃xff0c;但是您将无法再切换列的可见性。经过测试的浏览器是MSIE 11&＃xff0c;Safari 5&＃xff0c;Chromium 44&＃xff0c;Opera 12&＃xff0c;Mozilla SeaMonkey 2.40&＃xff0c;Mozilla Firefox43。" HTML5不支持HTML 4.01中的大多数属性"-请参见此处。

请执行以下操作&＃xff1a;

$("input[type&＃61;&＃39;checkbox&＃39;]").click(function() {

var index &＃61; $(this).attr(&＃39;name&＃39;).substr(2);

$(&＃39;table tr&＃39;).each(function() {

$(&＃39;td:eq(&＃39; &＃43; index &＃43; &＃39;)&＃39;,this).toggle();

});

});

这是未经测试的代码&＃xff0c;但是原理是您在每一行中选择与从复选框名称中提取的所选索引相对应的表格单元格。您当然可以使用类或ID来限制选择器。

这是功能更全的答案&＃xff0c;它在每列的基础上提供了一些用户交互。如果这将是一种动态体验&＃xff0c;则每个列上都需要有一个可单击的切换&＃xff0c;以指示可以隐藏该列的能力&＃xff0c;然后需要一种方法来还原以前隐藏的列。

在Javascript中看起来像这样&＃xff1a;

$(&＃39;.hide-column&＃39;).click(function(e){

var $btn &＃61; $(this);

var $cell &＃61; $btn.closest(&＃39;th,td&＃39;)

var $table &＃61; $btn.closest(&＃39;table&＃39;)

// get cell location - https://stackoverflow.com/a/4999018/1366033

var cellIndex &＃61; $cell[0].cellIndex &＃43; 1;

$table.find(".show-column-footer").show()

$table.find("tbody tr, thead tr")

.children(":nth-child("&＃43;cellIndex&＃43;")")

.hide()

})

$(".show-column-footer").click(function(e) {

var $table &＃61; $(this).closest(&＃39;table&＃39;)

$table.find(".show-column-footer").hide()

$table.find("th, td").show()

})

为此&＃xff0c;我们将在表中添加一些标记。在每个列标题中&＃xff0c;我们可以添加类似的内容以提供可点击内容的可视指示

data-toggle&＃61;"tooltip" data-placement&＃61;"bottom" title&＃61;"Hide Column">

我们将允许用户通过表格页脚中的链接还原列。如果默认情况下它不是持久性的&＃xff0c;则在表头中动态切换它可能会在表中产生混乱&＃xff0c;但您实际上可以将其放置在所需的任何位置&＃xff1a;

Some columns hidden - click to show all

这是基本功能。这是下面的演示&＃xff0c;还有更多细节。您还可以在按钮上添加工具提示&＃xff0c;以帮助阐明按钮的用途&＃xff0c;将按钮有机地设置为表格标题&＃xff0c;并折叠列宽&＃xff0c;以添加一些(有点怪异)的css动画以使过渡少一些跳动的。

jsFiddle和Stack片段中的工作演示&＃xff1a;

$(function() {

// on init

$(".table-hideable .hide-col").each(HideColumnIndex);

// on click

$(&＃39;.hide-column&＃39;).click(HideColumnIndex)

function HideColumnIndex() {

var $el &＃61; $(this);

var $cell &＃61; $el.closest(&＃39;th,td&＃39;)

var $table &＃61; $cell.closest(&＃39;table&＃39;)

// get cell location - https://stackoverflow.com/a/4999018/1366033

var colIndex &＃61; $cell[0].cellIndex &＃43; 1;

// find and hide col index

$table.find("tbody tr, thead tr")

.children(":nth-child(" &＃43; colIndex &＃43;")")

.addClass(&＃39;hide-col&＃39;);

// show restore footer

$table.find(".footer-restore-columns").show()

}

// restore columns footer

$(".restore-columns").click(function(e) {

var $table &＃61; $(this).closest(&＃39;table&＃39;)

$table.find(".footer-restore-columns").hide()

$table.find("th, td")

.removeClass(&＃39;hide-col&＃39;);

})

$(&＃39;[data-toggle&＃61;"tooltip"]&＃39;).tooltip({

trigger: &＃39;hover&＃39;

})

})

body {

padding: 15px;

}

.table-hideable td,

.table-hideable th {

width: auto;

transition: width .5s, margin .5s;

}

.btn-condensed.btn-condensed {

padding: 0 5px;

box-shadow: none;

}

/* use class to have a little animation */

.hide-col {

width: 0px !important;

height: 0px !important;

display: block !important;

overflow: hidden !important;

margin: 0 !important;

padding: 0 !important;

border: none !important;

}

Controller

Action

Type

Attributes

HomeIndexActionResultAuthorizeClientIndexActionResultAuthorizeClientEditActionResultAuthorizeSome columns hidden - click to show all

您正在隐藏最近的1列&＃xff0c;如何隐藏最近的3列&＃xff1f;

检查我的表格-i.stack.imgur.com/AA8iZ.png和包含表格html的问题-stackoverflow.com/questions/50838119/按钮将在A&＃xff0c;B和C之后

很抱歉&＃xff0c;无法恢复这样的旧答案&＃xff0c;但是是否有一种简单的方法可以将某些列默认设置为隐藏&＃xff1f;我试图用$(document).ready这样做但没有运气

&＃64;RobotJohnny&＃xff0c;好问题。这使用类.hide-col删除列&＃xff0c;但是它也可以用于指示状态&＃xff0c;因此您可以-在呈现html时将.hide-col添加到每个td和tr中并完成操作。或者&＃xff0c;如果您想将其添加到更少的位置&＃xff0c;则将其放置在标题中(该状态必须到某个地方)&＃xff0c;并在初始化时使用它在子级中隐藏该列索引。当前&＃xff0c;代码只是侦听单击位置&＃xff0c;但也可以对其进行修改以查找类位置。还有&＃xff0c;土耳其快乐的一天

&＃64;RobotJohnny&＃xff0c;我更新了代码示例以包括初始化处理。 只需将class&＃61;hide-col放到html中您想要的任何位置(可能在thead > tr > th中最有意义&＃xff0c;它将进行选择以确保它隐藏了该列中的所有单元格并动态显示了还原页脚

隐藏任何列时如何保持列宽固定&＃xff1f;

&＃64;sjain&＃xff0c;演示中的表的宽度设置为100%&＃xff0c;因此&＃xff0c;当删除列时&＃xff0c;其他列将占据该空间。 一种方法是不让表格填充100&＃xff05;的宽度&＃xff0c;然后每列将独立调整大小并保留其宽度&＃xff0c;无论可见的是什么。 这是jsFiddle中这种方法的示例

当然&＃xff0c;对于支持nth-child的浏览器&＃xff0c;CSS唯一的方法是&＃xff1a;

table td:nth-child(2) { display: none; }

这适用于IE9及更高版本。

对于您的用例&＃xff0c;您需要几个类来隐藏列&＃xff1a;

.hideCol1 td:nth-child(1) { display: none;}

.hideCol2 td:nth-child(2) { display: none;}

等等...

First Name

....

...

$(document).ready(function() {

$(&＃39;#demo&＃39;).multiselect();

});

$("input:checkbox:not(:checked)").each(function() {

var column &＃61;"table ." &＃43; $(this).attr("name");

$(column).hide();

});

$("input:checkbox").click(function(){

var column &＃61;"table ." &＃43; $(this).attr("name");

$(column).toggle();

});

以下内容基于Eran的代码进行了一些小的更改。经过测试&＃xff0c;它在Firefox 3&＃xff0c;IE7上似乎可以正常工作。

/p>

"http://www.w3.org/TR/html4/loose.dtd">

$(document).ready(function() {

$(&＃39;input[type&＃61;"checkbox"]&＃39;).click(function() {

var index &＃61; $(this).attr(&＃39;name&＃39;).substr(3);

index--;

$(&＃39;table tr&＃39;).each(function() {

$(&＃39;td:eq(&＃39; &＃43; index &＃43; &＃39;)&＃39;,this).toggle();

});

$(&＃39;th.&＃39; &＃43; $(this).attr(&＃39;name&＃39;)).toggle();

});

});

Header 1Header 2Header 3

Column1Column2Column3Column1Column2Column3Column1Column2Column3Column1Column2Column3

Hide/Show Column 1

Hide/Show Column 2

Hide/Show Column 3

没有课&＃xff1f;然后&＃xff0c;您可以使用标签&＃xff1a;

var tds &＃61; document.getElementsByTagName(&＃39;TD&＃39;),i;

for (i in tds) {

tds[i].style.display &＃61; &＃39;none&＃39;;

}

并显示给他们使用&＃xff1a;

...style.display &＃61; &＃39;table-cell&＃39;;