在 HTML 表格中隐藏/显示列答案

【问题标题】：Hide/Show Column in an HTML Table在 HTML 表格中隐藏/显示列
【发布时间】：2010-10-02 03:23:14
【问题描述】：

我有一个包含几列的 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>

【问题讨论】：

我希望以下网站会有所帮助：fiendish.demon.co.uk/html/javascript/hidetablecols.html
我使用 jQuery 实现了这个解决方案，它非常适合我：http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html
根据 user344059 的评论，这里是断开链接的网络存档http://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html

标签： jquery html hide html-table show

【解决方案1】：

你可以使用 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 没有跨浏览器支持，这不再是真的吗？
也许吧。我正在将此方法用于高亮列，（firefox、safari、chrome 工作正常）从未在 IE 中尝试过。
@Brian - IE8 不工作，启用 IE7 的 IE8 似乎工作正常。
这似乎不再适用于现代浏览器（Chrome 和 Firefox）
@JBE：确切地说，这确实在现代浏览器中在某种程度上工作。使用$('table > colgroup > col.yourClassHere') jQuery 选择器，您仍然可以将 smth 设置为整个列的背景颜色，但您不再能够切换列的可见性。测试的浏览器有 MSIE 11、Safari 5、Chromium 44、Opera 12、Mozilla SeaMonkey 2.40，Mozilla 火狐 43。 “HTML5 不支持 HTML 4.01 中的大多数属性”——参见here。

【解决方案2】：

以下应该这样做：

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

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

【讨论】：

【解决方案3】：

以下内容基于 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>

【讨论】：

【解决方案4】：

我想在不为每个 td 附加一个类的情况下这样做

就个人而言，我会采用 class-on-each-td/th/col 方法。然后，您可以使用对容器上的 className 的一次写入来打开和关闭列，假设样式规则如下：

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

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

如果您可以不支持 IE6，您可以使用邻接选择器来避免将类属性添加到 tds。或者，如果您关心的是使标记更清晰，您可以在初始化步骤中从 JavaScript 自动添加它们。

【讨论】：

感谢您的建议，我本来想保持 HTML 更干净，但随着表格大小接近 100 行，性能肯定会成为问题。此解决方案提供了 2-5 倍的性能提升。
这种方法在性能方面为我创造了奇迹。谢谢！
我将它添加到我的 css .hidden {display:none;} 并使用了 .addClass('hidden') 和 .removeClass('hidden')，这比 .hide() 和 .show() 快一点。

【解决方案5】：

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

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

如果你的表有标题（th），使用这个：

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

来源：Hide a Table Column with a Single line of jQuery code

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

如果你想看一个好的用例，看看我的博文：

Hide a table column and colorize rows based on value with jQuery.

【讨论】：

顺便说一句，因为它们不在示例中，是否存在忽略 colspans 的问题？很好，如果你不使用它们。还有一个相关的问题：stackoverflow.com/questions/1166452/…
我不得不将 tbody 添加到选择器以避免使用寻呼机隐藏页脚：$('.webgrid tbody td:nth-child(1), .webgrid th:nth-child(1) )').hide();
@KimR 这可能有助于解决 colspan 问题stackoverflow.com/questions/9623601/…
我不知道具体原因，但我不得不改用 'nth-of-type' 来让它工作。例如：$('table td:nth-of-type(2)').hide();
@golimar yes... 要限制这一点，您需要向要定位的表添加一个 CSS 类。比如：.my-table-class td:nth-child(2)

【解决方案6】：

没有课？然后您可以使用标签：

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

并向他们展示使用：

...style.display = 'table-cell';

【讨论】：

【解决方案7】：

当然，browsers that support nth-child 的 CSS 唯一方法：

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

这适用于 IE9 及更高版本。

对于您的用例，您需要几个类来隐藏列：

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

等等……

【讨论】：

【解决方案8】：

<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>

【讨论】：

【解决方案9】：

这是一个功能更全面的答案，它在每列的基础上提供一些用户交互。如果这将是一种动态体验，则需要在每列上都有一个可点击的切换开关，指示能够隐藏该列，然后是一种恢复以前隐藏的列的方法。

这在 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 中的工作演示和堆栈片段：

$(function() {
  // on init
  $(".table-hideable .hide-col").each(HideColumnIndex);

  // on click
  $('.hide-column').click(HideColumnIndex)

  function HideColumnIndex() {
    var $el = $(this);
    var $cell = $el.closest('th,td')
    var $table = $cell.closest('table')

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

    // find and hide col index
    $table.find("tbody tr, thead tr")
      .children(":nth-child(" + colIndex + ")")
      .addClass('hide-col');
      
    // show restore footer
    $table.find(".footer-restore-columns").show()
  }

  // restore columns footer
  $(".restore-columns").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".footer-restore-columns").hide()
    $table.find("th, td")
      .removeClass('hide-col');

  })

  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover'
  })

})

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;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>




<table class="table table-condensed table-hover table-bordered table-striped table-hideable">

  <thead>
    <tr>
      <th>
        Controller
        <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>
      </th>
      <th class="hide-col">
        Action
        <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>
      </th>
      <th>
        Type
        <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>
      </th>
      <th>
        Attributes
        <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>
      </th>
  </thead>
  <tbody>

    <tr>
      <td>Home</td>
      <td>Index</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Index</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Edit</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

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

【讨论】：

你正在隐藏最近的 1 列，如何隐藏最近的 3 列？
检查我的表格 - i.stack.imgur.com/AA8iZ.png 和包含表格 html 的问题 - stackoverflow.com/questions/50838119/… 按钮将出现在 A、B 和 C 之后
很抱歉恢复这样一个旧答案，但有没有一种简单的方法可以将某些列默认设置为隐藏？我正在尝试使用 $(document).ready 这样做，但没有运气
@RobotJohnny，好问题。这是使用.hide-col 类来删除列，但它也可以用于指示状态，因此您可以在渲染html 时将.hide-col 添加到每个td 和tr 并完成。或者，如果您想在更少的地方添加它，请将其放在标题中（该状态必须转到某个地方），然后在初始化时，使用它来隐藏子级中的列索引。目前，代码只是监听点击的位置，但也可以修改它来寻找类的位置。还有，火鸡节快乐
@RobotJohnny，我更新了代码示例以包括初始化处理。只需将 class='hide-col' 放在 html 中您想要的任何位置（可能在 thead > tr > th 中最有意义，它会拾起以确保它隐藏该列中的所有单元格并动态显示恢复页脚