在HTML表中隐藏/显示列

我有一个包含多个列的HTML表,我需要使用jquery实现列选择器.当用户单击复选框时,我想隐藏/显示表中的相应列.我想这样做而不将表附加到表中的每个td,有没有办法使用jquery选择整个列？以下是HTML的示例.

    

        
Header 1
Header 2
Header 3
    
    
Column1
Column2
Column3
    
Column1
Column2
Column3
    
Column1
Column2
Column3
    
Column1
Column2
Column3



     Hide/Show Column 1 

     Hide/Show Column 2 

     Hide/Show Column 3 

Leniel Macca.. 239

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

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

如果您的表有标题(th),请使用:

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

来源:使用单行jQuery代码隐藏表列

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

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

使用jQuery隐藏表列并基于值着色行.

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

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

如果您的表有标题(th),请使用:

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

来源:使用单行jQuery代码隐藏表列

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

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

使用jQuery隐藏表列并基于值着色行.

我想这样做而不需要为每个td附加一个类

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

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

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

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

你可以使用colgroups:

    
       
       
         
    
    

        
Header 1
Header 2
Header 3
    
    
Column1
Column2
Column3
    
Column1
Column2
Column3
    
Column1
Column2
Column3
    
Column1
Column2
Column3

然后你的脚本可以改变欲望类.

以下应该这样做:

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

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

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

在JavaScript中看起来像这样：

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

  // get cell location - /sf/ask/17360801/
  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()

})

   
    Some columns hidden - click to show all
  

$(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 - /sf/ask/17360801/
    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;
}

  

    

      

        Controller
        
            
        
      
      

        Action
        
            
        
      
      

        Type
        
            
        
      
      

        Attributes
        
            
        
      
  
  


    

      
Home
      
Index
      
ActionResult
      
Authorize
    

    

      
Client
      
Index
      
ActionResult
      
Authorize
    

    

      
Client
      
Edit
      
ActionResult
      
Authorize
    

  
  

    

      
Some columns hidden - click to show all