将jQuery切换函数应用于每个表

Question

我在网页上有三个使用龙卷风框架生成的html表。当用户点击一个表时，我希望该表的所有行都切换隐藏/显示，除了该表的第一行和最后一行。我试图使用每个jQuery并切换来实现这一目标。

在这里小提琴：https://jsfiddle.net/kauk975e/

$(".hidesomerows").each(function() {
  $(function(){
    $(function() {
      $('table').click(function() {
        console.log('click registered');
        $(this).parent().find("tr").not(":last").not(":first").toggle();
        console.log('why you no work?');
      });
    });
  });
});

当我点击第一个表时，它会为显示的每个表将一条调试消息打印到控制台一次，但不会隐藏行。单击第二个或第三个表时没有任何反应。我错过了什么？

Answer 1

您不需要使用.parent()，因为事件处理程序附加了TABLE元素。当前元素上下文this将引用它。因此，请直接使用.find()定位TR s

$('table.hidesomerows').click(function() {
  $(this).find("tr").not(":last").not(":first").toggle();
});

$('table.hidesomerows').click(function() {
  $(this).find("tr").not(":last").not(":first").toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table hidesomerows">
  <tbody>
    <tr>
      <th>foo</th>
      <th>bar</th>
      <th>x</th>
      <th>y</th>
    </tr>
    <tr>
      <td> alpha </td>
      <td> alpha </td>
      <td>-20.0</td>
      <td>20.0</td>
    </tr>
    <tr>
      <td>beta</td>
      <td>beta</td>
      <td>124.390625</td>
      <td>-20.0</td>
    </tr>
    <tr>
      <td>gamma</td>
      <td>gamma</td>
      <td>124.390625</td>
      <td>-20.0</td>
    </tr>
    <tr>
      <td>total</td>
      <td> </td>
      <td> 0 </td>
      <td> -20 </td>
    </tr>
  </tbody>
</table>
<br>
<table class="table hidesomerows">
  <tbody>
    <tr>
      <th>foo</th>
      <th>bar</th>
      <th>x</th>
      <th>y</th>
    </tr>
    <tr>
      <td> alpha </td>
      <td> alpha </td>
      <td>-20.0</td>
      <td>20.0</td>
    </tr>
    <tr>
      <td>beta</td>
      <td>beta</td>
      <td>124.390625</td>
      <td>-20.0</td>
    </tr>
    <tr>
      <td>gamma</td>
      <td>gamma</td>
      <td>124.390625</td>
      <td>-20.0</td>
    </tr>
    <tr>
      <td>total</td>
      <td> </td>
      <td> 0 </td>
      <td> -20 </td>
    </tr>
  </tbody>
</table>
<br>
<table class="table hidesomerows">
  <tbody>
    <tr>
      <th>foo</th>
      <th>bar</th>
      <th>x</th>
      <th>y</th>
    </tr>
    <tr>
      <td> alpha </td>
      <td> alpha </td>
      <td>-20.0</td>
      <td>20.0</td>
    </tr>
    <tr>
      <td>beta</td>
      <td>beta</td>
      <td>124.390625</td>
      <td>-20.0</td>
    </tr>
    <tr>
      <td>gamma</td>
      <td>gamma</td>
      <td>124.390625</td>
      <td>-20.0</td>
    </tr>
    <tr>
      <td>total</td>
      <td> </td>
      <td> 0 </td>
      <td> -20 </td>
    </tr>
  </tbody>
</table>