1

複数のテーブルを表示する Web ページがあります。特定のテーブルのいくつかの列の表示を切り替えたいと思います。私は使い始めました：

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

テーブルが1つしかなかったとき。

2 つの質問:

  1. 上記のコードを変更して、( にある) 1 つのテーブルのみを扱うようにするにはどうすればよい<div id="mytable">...</div>ですか?
  2. テーブルヘッダーの正規表現一致に基づいて複数の列を切り替えるように上記のコードを変更するにはどうすればよいですか?
4

2 に答える 2

1

次のようなものが必要かもしれません: http://jsfiddle.net/VjJpe/マークアップに従う必要があります。ここではテーブル構造を 1 つだけ提供しましたが、同じマークアップで複数のテーブルでも機能します。

    <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>
于 2013-06-14T07:21:42.183 に答える
0

これを試すことができると思います：

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();
  }
});
于 2013-06-14T06:09:16.443 に答える