0

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

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");

没有一个工作！在你看来是什么问题？谢谢你的帮助！

4

4 回答 4

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

于 2012-08-07T18:32:05.003 回答
0 
$('.showrows').live('click', function(e) {
    e.preventDefault();

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

试试这个。

于 2012-08-07T18:32:15.367 回答
0

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

您必须将链接“附加”到表格。例如，您可以使用 data-... 属性，但 id 也可以。注意：您不能直接在 a 中放置锚点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");

于 2012-08-07T18:35:15.960 回答
0

稍微改变一下 HTML。

将您的锚标记放在表格之外以进行有效标记。

HTML

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

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

演示

一件事

如果可能，使用, 而不是 ,处理.on()委托事件（又名实时事件），因为它已弃用.jQuery 1.7+.live()

于 2012-08-07T18:37:04.787 回答