如何使用jQuery隐藏表中具有特定类的最后一行

How to hide last table row with specific class in table with jQuery

本文关键字：最后 一行 隐藏 jQuery 何使用      更新时间：2023-09-26

我有一个页面，其中包含一系列具有以下结构的表

<table>
 <thead>
   <tr>
     <th>2</th>
     <th>Position</th>
     <th>Names</th>
   </tr>
</thead>
<tbody>
 <tr class="station-12 odd"><td>12</td><td>AO</td><td id="2-1-12-am">Name goes here</td> </tr>
 <tr class="station-12 even"><td></td><td>FF</td><td id="2-2-12-am">Name goes here</td> </tr>
 <tr class="station-12 odd"><td></td><td>PFF</td><td id="2-3-12-am">Name goes here</td> </tr>
 <tr class="separator even"><td colspan="3"></td> </tr>
 <tr class="station-13 odd"><td>13</td><td>AO</td><td id="2-1-13-am">Name goes here</td> </tr>
 <tr class="station-13 even"><td></td><td>FF</td><td id="2-2-13-am">Name goes here</td> </tr>
 <tr class="station-13 odd"><td></td><td>PFF</td><td id="2-3-13-am">Name goes here</td> </tr>
 <tr class="separator even"><td colspan="3"></td> </tr>
 <tr class="station-18 odd"><td>18</td><td>AO</td><td id="2-1-18-am">Name goes here</td> </tr>
 <tr class="station-18 even"><td></td><td>FF</td><td id="2-2-18-am">Name goes here</td> </tr>
 <tr class="station-18 odd"><td></td><td>PFF</td><td id="2-3-18-am">Name goes here</td> </tr>
 <tr class="separator even"><td colspan="3"></td> </tr>
 <tr class="station-19 odd"><td>19</td><td>AO</td><td id="2-1-19-am">Name goes here</td> </tr>
 <tr class="station-19 even"><td></td><td>FF</td><td id="2-2-19-am">Name goes here</td> </tr>
 <tr class="station-19 odd"><td></td><td>PFF</td><td id="2-3-19-am">Name goes here</td> </tr>
</tbody>
</table>

这种结构存在于日历类型的页面上，一个月中的每一天都有一个这样的表。我有一些工作代码，它使用选择列表和按钮来过滤显示的行。

  $('form#my-form').submit(function(context, settings) {
    // First, display any rows that are hidden.
    $('table#my-table tbody tr :hidden').show();
    // Get items not selected in select list and hide them.
    $('select#edit-stations').find('option').not(':selected').each(function(i, option) {
      var station_id = $(this).val();
      var station_class = '.station-' + station_id;
      $(station_class).hide().parent().find('.separator').last().hide();
    });
    // Keep form from being submitted.
    return false;
  });

隐藏的部分就像一个符咒。我遇到的问题是试图隐藏最后一个station-x行后面的最后一个分隔符行。例如，如果我隐藏所有的station-18和station-19行，我还想隐藏紧跟在station-13行后面的.separtment行。正如您在我的代码中看到的那样，我的想法是遍历父元素（在本例中为<tbody>），找到所有<tr class="separator">元素并隐藏它们，但这不起作用。如果我在那一行放了一个断点，并在控制台中输入$(station_class).hide().parent()，我只会得到一个空数组，所以很明显我没有错误地使用.Pparent（）。我也试过.closest()，但没有成功。

我接近了吗，或者有更好/更容易的方法来做我想做的事情吗？

谢谢。

在重新检查您的代码后，我注意到您的语法有问题。具体来说，这条线路

$(station_class).hide().parent().find('.separator').last().hide();

应该改为

$(station_class).parent().find('.separator').last().hide();

您调用了hide()方法两次。

试用siblings()

$(station_class).hide().siblings('.separator').last().hide();

更新：

您也可以尝试使用单独的行代码。

var sep = $(station_class).hide();
sep.siblings('.separator').last().hide();

我会这样做：

每个站点（第一个站点除外）生成之前

<tr class="separator station-nn"><td colspan="3"></td> </tr>

其中nn＝下一站的站号。

然后，当您关闭工作站时，只需关闭分隔符行即可。

换句话说，每个工作站的前一个都有一个与该工作站关联的分隔符。当然除了第一站。。。

尝试next（）它可能看起来非常简单和动态

$（'.station-18'）.hide（）.next（'.separator'）.hided（）

试试下面的演示。

$(document).ready(function() {
  setTimeout(function() {
    $('.station-12').hide().next('.separator').hide();
  }, 1000);
  setTimeout(function() {
    $('.station-13').hide().next('.separator').hide();
  }, 2000);
  setTimeout(function() {
    $('.station-18').hide().next('.separator').hide();
  }, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>2</th>
      <th>Position</th>
      <th>Names</th>
    </tr>
  </thead>
  <tbody>
    <tr class="station-12 odd">
      <td>12</td>
      <td>AO</td>
      <td id="2-1-12-am">Name goes here</td>
    </tr>
    <tr class="station-12 even">
      <td></td>
      <td>FF</td>
      <td id="2-2-12-am">Name goes here</td>
    </tr>
    <tr class="station-12 odd">
      <td></td>
      <td>PFF</td>
      <td id="2-3-12-am">Name goes here</td>
    </tr>
    <tr class="separator even">
      <td colspan="3"></td>
    </tr>
    <tr class="station-13 odd">
      <td>13</td>
      <td>AO</td>
      <td id="2-1-13-am">Name goes here</td>
    </tr>
    <tr class="station-13 even">
      <td></td>
      <td>FF</td>
      <td id="2-2-13-am">Name goes here</td>
    </tr>
    <tr class="station-13 odd">
      <td></td>
      <td>PFF</td>
      <td id="2-3-13-am">Name goes here</td>
    </tr>
    <tr class="separator even">
      <td colspan="3"></td>
    </tr>
    <tr class="station-18 odd">
      <td>18</td>
      <td>AO</td>
      <td id="2-1-18-am">Name goes here</td>
    </tr>
    <tr class="station-18 even">
      <td></td>
      <td>FF</td>
      <td id="2-2-18-am">Name goes here</td>
    </tr>
    <tr class="station-18 odd">
      <td></td>
      <td>PFF</td>
      <td id="2-3-18-am">Name goes here</td>
    </tr>
    <tr class="separator even">
      <td colspan="3"></td>
    </tr>
    <tr class="station-19 odd">
      <td>19</td>
      <td>AO</td>
      <td id="2-1-19-am">Name goes here</td>
    </tr>
    <tr class="station-19 even">
      <td></td>
      <td>FF</td>
      <td id="2-2-19-am">Name goes here</td>
    </tr>
    <tr class="station-19 odd">
      <td></td>
      <td>PFF</td>
      <td id="2-3-19-am">Name goes here</td>
    </tr>
  </tbody>
</table>

相关文章：