Question

我有几张类似结构的表：

<table>
<tbody>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr>
  <tr>content</tr> ..etc
    --- The fake button is added here
    <div class="addrow">Add another</div>
</tbody>
</table>

更新：所有行都具有相同的可拖动类。

由于这是一个很长的列表，我需要一次切换一行。我只需要显示第一行，当然，剩下的应该切换。

动作是当我点击动态假按钮时，它会显示行号。 2，再次点击将显示另一行。

这是我到目前为止所做的：

$("table#field_fruit_values tr.draggable").not(':first').hide();
$("table#field_vegetables_values tr.draggable").not(':first').hide();


$("body.form table.content-multiple-table tbody").append('<div class="addrow">Add</div>');

$(".addrow").click(function() {
  var  hiddenRow = $(this).prev('tr.draggable');
  $(this).prev(hiddenRow + 1).show();
    //if (hiddenRow + ':last').length) { // <= silly logic
     // $(this).hide();
    //}
});

该按钮仅适用于一行。我一定做错了。）

当达到决赛时，我也希望按钮消失。

对不起，如果这个问题听起来很傻。

非常感谢任何帮助。

感谢。

Answer 1

你可以用更少的DOM遍历来更简洁：

$(".addrow").click(function() {
   var row = $(this).prev("table").find("tr:hidden:first");
   if(row.length) row.show();
   else $(this).hide();
});

同时将您的.append()更改为.after()以获取有效的HTML（<div>中的<tbody>无效）：

$("table.content-multiple-table").after('<div class="addrow">Add</div>');

Answer 2

prev(hiddenRow + 1)

hiddenRow是一个jQuery对象。

据我所知，你不能添加一个。

您可能想要做的是创建一个名为“可见”的类。每次显示一行时，请将该类赋予该类。然后，找到最后一个可见行：

$(this).closest('table').find('tr.visible').filter(':last')

一次切换一行可见性

2 个答案: