Jquery 一次切换一行可见性

我有两张类似结构的表，如下所示：

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

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

内容
内容
内容
内容
内容
内容
内容
内容等
---这里添加了假按钮
再加一个

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

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

当我点击一个动态假按钮时，它将显示第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();
    //}
});

$（“表#字段#值tr.draggable”）.not（'：first'）.hide（）；
$（“表#字段#值tr.draggable”）.not（'：first'）.hide（）；
$（“body.form table.content-multiple-table tbody”）.append（'Add'）；
$（“.addrow”）。单击（函数（）{
var hiddenRow=$（this.prev（'tr.draggable'）；
$（this.prev（hiddenRow+1）.show（）；
//如果（hiddenRow+'：last'）.length）{//
hiddenRow
是一个jQuery对象

据我所知，你不能再加一个

您可能要做的是创建一个名为“visible”的类。每次使一行可见时，将该行赋予该类。然后，要查找最后一个可见行，请执行以下操作：

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

hiddenRow
是一个jQuery对象

据我所知，你不能再加一个

您可能要做的是创建一个名为“visible”的类。每次使一行可见时，将该行赋予该类。然后，要查找最后一个可见行，请执行以下操作：

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

您可以使用更少的DOM遍历来实现更简洁的操作，如下所示：

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

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

同时将
.append（）
更改为
.after（）
以获取有效的html（
中的
无效）：

$（“table.content多表”）。在（'Add'）之后；
您可以用更少的DOM遍历来简化它，如下所示：

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

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

同时将
.append（）
更改为
.after（）
以获取有效的html（
中的
无效）：

$（“table.content多表”）。在（'Add'）之后；
我不相信tbody标记中包含的任何东西都不能与tr标记一起包含。而且，如果类为“Dragable”，那么只有可见行吗？你是对的。我只是不介意这次的标记，当然，除非我有其他更好的方法。所有的都是Dragable类。我会更新这个问题。谢谢，我不相信任何事情ng可以包含在tbody标记中，而tbody标记不包含在tr标记中。另外，如果类为“Dragable”，则只有可见行吗？你是对的。这次我不介意标记，当然，除非我有其他更好的方法。所有标记都被赋予Dragable类。我将更新问题。谢谢你再次很好地回答了我的问题。谢谢非常感谢，尼克。prev（）和next（）不是只有兄弟姐妹吗？在这个例子中，它是@Hunter的兄弟姐妹-这是答案的第二部分，它不是有效的html…需要将div放在表格后面，而不是在tbody:）你又很好地回答了我的问题。非常感谢你，尼克。prev（）和next（）不是吗仅获取兄弟姐妹？在示例中，是@Hunter的兄弟姐妹-这是答案的第二部分，它不是有效的html…需要将div放在表后，而不是tbody:）