Question

我有一张分成几个人的桌子。每个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('tr').siblings().hide(); // hide all except self
});

Answer 3

我认为应该这样做

$('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();
});

演示：Fiddle

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

Answer 4

他想要隐藏所有兄弟姐妹的行，所以：

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

DEMO：http://jsfiddle.net/NeXMh/1/

修改

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

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

Answer 5

隐藏第一个...

以外的所有行

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

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

5 个答案: