JQuery:无法显示隐藏的<；tr>；单击链接时

我有以下代码正在工作（单击链接将显示下一个隐藏表行）：

HTML:

但是现在我需要在同一页上有几个类似于当前表（见上文）的表，每个表都有自己的“showrows”功能。实际上，我需要我的JQuery代码来找到链接属于哪个表，然后找到这个表的第一个隐藏行，并显示它

我一个接一个地尝试了以下所有解决方案：

$(this).closest('tr.cache').show("fast");
$(this).closest('tr:hidden:first').show("fast");
$(this).closest('table').find('tr:hidden:first').show("fast");
$(this).closest('tr').show("fast");
$(this).parents('table').next('tr:hidden:first').show("fast");

---

没有人在工作！根据你的说法是什么问题？谢谢你的帮助

在链接周围添加表行和表单元格，则HTML标记无效

浏览器（大多数）浏览器所做的工作将为您提供以下标记：

<a class="showrows" href="#">Add row</a>
<table>
    <tbody>
        <tr class="cache">
            <td><input type="text" size="15"></td>
            <td><input type="text" size="15"></td>
        </tr>
        <tr class="cache">
            <td><input type="text" size="15"></td>
            <td><input type="text" size="15"></td>
        </tr>
    </tbody>
</table>

}))

演示：

试试这个。

带有标识符（可以更改HTML结构）

您必须将链接“附加”到表。您可以使用数据-。。。属性，但id也可以。 注意：您不能将锚直接放在

表中，因此Vadym Petrychenko的解决方案仍然是无效的HTML

<a href="#" class="showrows" data-table="table1">Add row to table 1</a>
<table id="table1">
    <tr class="cache">
        <td><input type="text"  size="15">Table 1 cell 1</td>
        <td><input type="text"  size="15">Table 1 cell 2</td>
    </tr>
    <tr class="cache">
        <td><input type="text"  size="15">Table 1 cell 3</td>
        <td><input type="text"  size="15">Table 1 cell 4</td>
    </tr>
</table>

<a href="#" class="showrows" data-table="table2">Add row to table 2</a>
<table id="table2">
    <tr class="cache">
        <td><input type="text"  size="15">Table 2 cell 1</td>
        <td><input type="text"  size="15">Table 2 cell 2</td>
    </tr>
    <tr class="cache">
        <td><input type="text"  size="15">Table 2cell 3</td>
        <td><input type="text"  size="15">Table 2 cell 4</td>
    </tr>
</table>

看

无标识符

如果您真的在使用这种HTML结构，还可以使用
$（this.next（'table'）.find（'tr:hidden:first'）.show（'fast'））链接到锚点后的表
稍微更改一下HTML

将锚定标记放在表外以获得有效标记。
HTML


一件事
如果可能的话，请使用对代理事件（又称live事件）处理
jQuery 1.7+
，而不是
.live（）
，因为它已被弃用
如果使用@voigan的建议，那么它应该是
var table=$（this）.next（）非常感谢voigtan，它很有效！这是我的首选解决方案，因为我只对代码做了一些小的更改。我还要感谢瓦迪姆·佩特里彻和米奇的快速回答。
<a class="showrows" href="#">Add row</a>
<table>
    <tbody>
        <tr class="cache">
            <td><input type="text" size="15"></td>
            <td><input type="text" size="15"></td>
        </tr>
        <tr class="cache">
            <td><input type="text" size="15"></td>
            <td><input type="text" size="15"></td>
        </tr>
    </tbody>
</table>

<table>
  <tr>
    <td colspan="2">
      <a href="#" class="showrows">Add row</a>
    </td>
  </tr>
  <tr class="cache">
    <td><input type="text"  size="15"></td>
    <td><input type="text"  size="15"></td>
  </tr>

  <tr class="cache">
    <td><input type="text"  size="15"></td>
    <td><input type="text"  size="15"></td>
  </tr>

</table>

  $('tr.cache').css("display","none");

  $('.showrows').live('click',function(e){
    e.preventDefault();
    var table = $(this).closest("table");
    $('tr:hidden:first', table).show("fast");   
  });

$('.showrows').live('click', function(e) {
    e.preventDefault();

    var table = $(this).parent();
    $('tr:hidden:first', table).show("fast");   
});

<a href="#" class="showrows" data-table="table1">Add row to table 1</a>
<table id="table1">
    <tr class="cache">
        <td><input type="text"  size="15">Table 1 cell 1</td>
        <td><input type="text"  size="15">Table 1 cell 2</td>
    </tr>
    <tr class="cache">
        <td><input type="text"  size="15">Table 1 cell 3</td>
        <td><input type="text"  size="15">Table 1 cell 4</td>
    </tr>
</table>

<a href="#" class="showrows" data-table="table2">Add row to table 2</a>
<table id="table2">
    <tr class="cache">
        <td><input type="text"  size="15">Table 2 cell 1</td>
        <td><input type="text"  size="15">Table 2 cell 2</td>
    </tr>
    <tr class="cache">
        <td><input type="text"  size="15">Table 2cell 3</td>
        <td><input type="text"  size="15">Table 2 cell 4</td>
    </tr>
</table>

$(document).ready(function() {
    $('tr.cache').css("display","none");
    $('.showrows').live('click',function(e) {
        e.preventDefault();
        $('table#' + $(this).attr('data-table') + ' tr:hidden:first').show("fast");   
    });
});

<!-- First table -->

<a href="#" class="showrows">Add row</a>
<table>
  <tr class="cache">
    <td><input type="text"  size="15"></td>
    <td><input type="text"  size="15"></td>
  </tr>
  <tr class="cache">
    <td><input type="text"  size="15"></td>
    <td><input type="text"  size="15"></td>
  </tr>
</table>

<!-- Second table -->

<a href="#" class="showrows">Add row</a>
<table>
  <tr class="cache">
    <td><input type="text"  size="15"></td>
    <td><input type="text"  size="15"></td>
  </tr>
  <tr class="cache">
    <td><input type="text"  size="15"></td>
    <td><input type="text"  size="15"></td>
  </tr>
</table>

<!-- More tables -->

$('tr.cache').css("display", "none");

$('.showrows').live('click', function(e) {
    e.preventDefault();
    var table = $(this).next('table');
    table.find('tbody tr:hidden:first').show("fast");
});