在HTML表中隐藏/显示列


146

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

<table>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>

2
我希望如下因素网站将帮助:fiendish.demon.co.uk/html/javascript/hidetablecols.html

我使用jQuery实现了该解决方案,并且对我来说效果很好:http
Aaron 2010年

1
每个用户344059的评论,这是断开链接的Web存档http://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html
KyleMit

Answers:


84

我想做到这一点而不必在每个td上附加类

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

table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
...

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

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


7
感谢您的建议,我一直想保持HTML的整洁,但是当表的大小接近100行时,性能无疑成为问题。该解决方案将性能提高了2-5倍。
布赖恩·费舍尔2009年

2
在性能方面,这种方法为我创造了奇迹。谢谢!
axelarge 2012年

4
我将此添加到CSS .hidden {display:none;}并使用了.addClass('hidden').removeClass('hidden')它比.hide()和快一点.show()
styfle

247

使用jQuery的一行代码隐藏了第二列:

$('td:nth-child(2)').hide();

如果您的表具有header(th),请使用以下命令:

$('td:nth-child(2),th:nth-child(2)').hide();

来源:隐藏带有单行jQuery代码的表列

jsFiddle测试代码:http : //jsfiddle.net/mgMem/1/


如果您想查看一个好的用例,请看一下我的博客文章:

隐藏表列,并使用jQuery根据值对行着色


1
顺便说一句,因为它们不在示例中,所以不存在忽略colspans的问题吗?很好,如果您不使用它们。还有相关的另一个问题是:stackoverflow.com/questions/1166452/...
金- [R

2
我必须将tbody添加到选择器中,以避免用寻呼机隐藏页脚:$('。webgrid tbody td:nth-​​child(1),.webgrid th:nth-​​child(1)')。hide();
Alex

@KimR这可能有助于对合并单元格问题stackoverflow.com/questions/9623601/...
yunzen

我不知道为什么,但是我不得不使用'nth-of-type'来使其工作。例如:$('table td:nth-​​of-type(2)')。hide();
Leopoldo Sanczyk 2014年

@LeopoldoSanczyk您使用的是Safari吗?好像它需要n次的类型
ykay恢复莫妮卡说,

12

您可以使用colgroups:

<table>
    <colgroup>
       <col class="visible_class"/>
       <col class="visible_class"/>
       <col class="invisible_class"/>  
    </colgroup>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

然后,您的脚本可以只更改欲望<col>类。


我似乎记得colgroup没有跨浏览器的支持,这不再是事实吗?
Brian Fisher

也许。我正在为hilight列使用此方法,(firefox,safari,chrome可以正常工作)从未在IE中尝试过。
路易斯·梅尔拉加蒂

@Brian-IE8无法正常工作,启用IE7的IE8似乎可以正常工作。
诺德斯,2010年

4
在现代浏览器(Chrome和Firefox)中,这似乎不再起作用
JBE 2013年

@JBE:确切地说,这在某种程度上在现代浏览器中确实有效。使用jQuery选择器,您仍然可以将smth设置为整个列的背景颜色,但不再能够切换列的可见性。经过测试的浏览器为MSIE 11,Safari 5,Chromium 44,Opera 12,Mozilla SeaMonkey 2.40,Mozilla Firefox 43。“ HTML5不支持HTML 4.01中的大多数属性”-参见此处$('table > colgroup > col.yourClassHere')
低音

11

请执行以下操作:

$("input[type='checkbox']").click(function() {
    var index = $(this).attr('name').substr(2);
    $('table tr').each(function() { 
        $('td:eq(' + index + ')',this).toggle();
    });
});

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


11

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

在JavaScript中看起来像这样:

$('.hide-column').click(function(e){
  var $btn = $(this);
  var $cell = $btn.closest('th,td')
  var $table = $btn.closest('table')

  // get cell location - https://stackoverflow.com/a/4999018/1366033
  var cellIndex = $cell[0].cellIndex + 1;

  $table.find(".show-column-footer").show()
  $table.find("tbody tr, thead tr")
        .children(":nth-child("+cellIndex+")")
        .hide()
})

$(".show-column-footer").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".show-column-footer").hide()
    $table.find("th, td").show()

})

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

<button class="pull-right btn btn-default btn-condensed hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>

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

<tfoot class="show-column-footer">
   <tr>
    <th colspan="4"><a class="show-column" href="#">Some columns hidden - click to show all</a></th>
  </tr>
</tfoot>

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

演示屏幕抓图

jsFiddle和Stack片段中的工作演示:


您正在隐藏最近的1列,如何隐藏最近的3列?
Nirmal Goswami

检查我的桌子- i.stack.imgur.com/AA8iZ.png 和问题,其中包含表的HTML - stackoverflow.com/questions/50838119/...按钮会A,B和C之后
尼尔默尔哥斯瓦米

很抱歉,无法恢复这样的旧答案,但是是否有一种简单的方法可以将某些列默认设置为隐藏?我正在尝试这样做,$(document).ready但没有运气
RobotJohnny18年

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

1
@RobotJohnny,我更新了代码示例以包括初始化处理。只需将class='hide-col'您想要放置在html中的任何地方(可能在thead > tr > th最有意义的地方
放进

4

当然,只有CSS才支持 以下浏览器nth-child

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

这适用于IE9及更高版本。

对于您的用例,您需要几个类来隐藏列:

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

等等...


2

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
    $('input[type="checkbox"]').click(function() {
        var index = $(this).attr('name').substr(3);
        index--;
        $('table tr').each(function() { 
            $('td:eq(' + index + ')',this).toggle();
        });
        $('th.' + $(this).attr('name')).toggle();
    });
});
</script>
<body>
<table>
<thead>
    <tr>
        <th class="col1">Header 1</th>
        <th class="col2">Header 2</th>
        <th class="col3">Header 3</th>
    </tr>
</thead>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>
</body>
</html>

1
<p><input type="checkbox" name="ch1" checked="checked" /> First Name</p>
.... 
<td class="ch1">...</td>

 <script>
       $(document).ready(function() {
            $('#demo').multiselect();
        });


        $("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).hide();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});
 </script>

0

没有课?然后,您可以使用标签:

var tds = document.getElementsByTagName('TD'),i;
for (i in tds) {
  tds[i].style.display = 'none';
}

并显示给他们使用:

...style.display = 'table-cell';            
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.