jquery - 如何使用 jQuery nth 子选择器在 HTML 中的特定表中切换特定的多列？

Question

我有一个显示多个表格的网页。我想切换一个特定表的某些列的可见性。我开始使用：

$(document).on("change","#includePaths",function() {
    $("td:nth-child(3)").toggle();
});    

当我只有一张桌子时。

两个问题：

1. 如何修改上面的代码使其只处理一个表（在 中<div id="mytable">...</div>）？
2. 如何修改上述代码，使其根据表头上的正则表达式匹配切换多个列？

Answer 1

可能你需要这样的东西：http: //jsfiddle.net/VjJpe/你需要遵循标记。我只提供了一个表结构，但相同的标记也可以处理多个表。

    <table border="1" class="toggling_table">
    <th class="catcher" data-togglerid="1">Click to toggle</th>
    <th>No Click</th>
    <th class="catcher" data-togglerid="3">Click to toggle</th>
    <tr>
    <td class="toggler_1" >it will toggle</td>
    <td >it will not toggle</td>
    <td class="toggler_3">it will toggle</td>
    </tr>
    <tr>
    <td class="toggler_1" >it will toggle</td>
    <td >it will not toggle</td>
    <td class="toggler_3">it will toggle</td>
    </tr>
    <tr>
    <td class="toggler_1" >it will toggle</td>
    <td >it will not toggle</td>
    <td class="toggler_3">it will toggle</td>
    </tr>
    </table>
    <script type="text/javascript">
    $(function(){
    $(".toggling_table").on("click", ".catcher", function(){
    var id  = $(this).data("togglerid");
    alert(id);
    $(".toggler_"+id).toggle();
    }); 
    });
    </script> 

Answer 2

我想你可以试试这个：

var regex_to_hide = /cool.*regex/;

$(document).on("change", "#includePaths", function() {
  var columnsToHide = new Array();

  // I'm assuming #includePaths is the table
  // If not - replace "this" with the right selector for your table  

  // Test headers to see what we need to hide
  $("#mytable").find("th").each(function(i, th) {
      if (regex_to_hide.test($(th).html())) {
          columnsToHide.push(i);
      }
  });

  // Hide numbered columns
  for(i = 0; i < columnsToHide.lenght; i++) {
    $("#mytable").find("td:nth-child(" + columnsToHide[i] + ")").toggle();
  }
});