Question

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

HTML：

<table>

<a href="#" class="showrows">Add row</a>

<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>

和我的JS：

$(document).ready(function() {

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

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

});

但是现在我需要在同一页面上有几个像当前的表（见上文），每个表都有自己的“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");

并且没有人工作！根据你的问题是什么？谢谢你的帮助！

Answer 1

在链接周围添加表格行和表格单元格，您的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>

所以你需要稍微改变你的标记：

<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>

并使用jQuery代码： $（document）.ready（function（）{

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

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

}）;

演示：

http://jsbin.com/owefew/1/edit

Answer 2

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

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

试试这个。

Answer 3

使用标识符（可以更改HTML结构）

你必须附上＆＃39;表格的链接。例如，您可以使用data -...属性，但id也可以。注意：您不能将锚点直接放在table中，因此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>

JQuery代码：

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

请参阅http://jsfiddle.net/Mikey/KnRFf/

没有标识符

我确实在使用这种HTML结构，也可以在$(this).next('table').find('tr:hidden:first').show("fast");

锚之后链接到表格

Answer 4

稍微更改一下HTML。

将锚标记放在表格之外以获得有效标记。

的 HTML 的

<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>  <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> 

的的jQuery 的

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

<强> DEMO

一件事

如果可能，请使用 .on() 代表事件（也称为直播活动）处理jQuery 1.7+，而不是.live()，< strong> 因为已弃用 。

JQuery：单击链接时无法显示隐藏

4 个答案:

将锚标记放在表格之外以获得有效标记。

一件事