首页 文章

在HTML表中隐藏/显示列

提问于
浏览 次
139

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

    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 

    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 

</form>
jquery html hide html-table show

9 回答

  • 10

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

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

    并告诉他们使用：

    ...style.display = 'table-cell';
    回复于
  • 4

    当然，CSS只能用于browsers that support nth-child ：

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

    这适用于IE9和更新版本 .

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

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

    等...

    回复于
  • 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 
    
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 
    
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 
    
</form>
</body>
</html>
    回复于
  • 1

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

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

    如果您的表有 Headers （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 .

    回复于
  • 11

    你可以使用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> 类 .

    回复于
  • 80
    <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>
    回复于
  • 1

    这是一个功能更全面的答案，可以按列提供一些用户交互 . 如果这将是一次动态体验，则需要在每列上进行可单击切换以指示隐藏列的能力，然后再恢复以前隐藏的列 .

    在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()

})

    为了支持这一点，我们将在表格中添加一些标记 . 在每个列 Headers 中，我们可以添加这样的内容，以提供可点击内容的可视指示符

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

    我们将允许用户通过表格页脚中的链接恢复列 . 如果它在默认情况下不是持久的，那么在 Headers 中动态切换它可能会挤在 table 周围，但你可以把它放在任何你想要的地方：

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

    这是基本功能 . 这是一个下面的演示，其中还有一些东西可以充实 . 您还可以向按钮添加工具提示以帮助阐明其用途，将按钮更有条理地设置为表格 Headers ，并折叠列宽以添加一些（有点不稳定）的CSS动画以使转换少一点心惊肉跳 .

    jsFiddle和Stack Snippets中的工作演示：

    $(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>
    回复于
  • 0

    我想在没有为每个td附加课程的情况下这样做

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

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

    这比任何JS循环方法都要快;对于很长的表，它可以对响应性产生重大影响 .

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

    回复于
  • 230

    以下应该这样做：

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

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

    回复于

相关问题