javascript - 如何找到最近的 tbody 然后遍历它的行并隐藏它们

Question

我有一张桌子被分成几个 tbody 的。每个 tbody 的第一行都有一个按钮，用于隐藏该 tbody 中的所有其他行，除了其中包含按钮的行。

不知道如何实现这一点。

我的 HTML：

<table>
   <tbody>
       <tr>
           <td><button class="hide_button_main"> x </button></td>
           <td>Label</td>
       </tr>
        <tr>
            <td>Zone 1</td>
            <td></td>
        </tr>
        <tr>
            <td>Zone 2</td>
            <td></td>
        </tr> 
        <tr>
            <td>Zone 3</td>
            <td></td>
        </tr> 
       <tr>
            <td>Zone 4</td>
            <td></td>
        </tr> 
   </tbody>

区域 1 到 4 的行将被隐藏，但标签所在的行不会

我的jQuery：

     $('.hide_button_main').click(function(e) {

   // var rows = $(this).closest('tbody').find('tr').length;

    var rows = $(this).closest('tbody');

        rows.each(function() {

      alert('1');

    });


});

Answer 1

你可以用这个

$('.hide_button_main').click(function(e){
    $(this).closest('tbody').hide();
});

或者如果你想隐藏 tbody 孩子，请这样做

$('.hide_button_main').click(function(e){
    $(this).closest('tbody').find('tr').hide();
});

Answer 2

隐藏除第一行以外的所有行...

  $('.hide_button_main').click(function(e){
        $(this).closest('tbody').find('tr:not(:first)').hide();
    });

Answer 3

这应该有效：

$('.hide_button_main').click(function(e){
    $(this).closest('tr').siblings().hide(); // hide all except self
});

Answer 4

我认为这应该这样做

$('table').on('click', '.hide_button_main', function(e) {
    var target = $(e.currentTarget);
    var row = target.closest('tr');
    console.log('console', target, row, row.siblings())
    row.siblings().hide();
});

演示：小提琴

这里我们使用了使用 jQuery.on 的委托事件注册模型。如果我们有很多必须附加事件处理程序的元素，建议使用这种方法。

Answer 5

他想隐藏所有兄弟行，所以：

$('.hide_button_main').click(function (e) {
   var $currentRow = $(this).closest('tr');
   var $otherRows = $currentRow.siblings();
   $otherRows.hide();
});

演示：http: //jsfiddle.net/NeXMh/1/

编辑

处理多个表时，请使用单个事件处理程序：

$('table').on(click, '.hide_button_main', (function (e) {
   var $currentRow = $(this).closest('tr');
   var $otherRows = $currentRow.siblings();
   $otherRows.hide();
});