Jquery 如何在单击时显示多个表行

我有5行伴随着一个显示按钮，从点击我想一次显示两个隐藏的行。然后，我希望显示按钮在显示最后2行后变为禁用状态

这个问题与问题非常相似，只是我不能使用答案，因为display:block css会改变行中的数据和样式

<p><a href="#" id="display">Display More</a></p>

<table>
 <tr class="showfirstRow">
  <th>First Name</th>
  <th>Last Name</th>
</tr>
 <tr class="secondRow">
  <td>Peter</td>
  <td>Griffin</td>
</tr>
<tr class="thirdRow">
  <td>Lois</td>
  <td>Griffin</td>
</tr>
<tr class="fourthRow">
 <td>Meg</td>
 <td>Griffin</td>
</tr>
<tr class="fithRow">
 <td>Stewie</td>
 <td>Griffin</td>
</tr>
</table>


$("#display").click(function() {
// show the next hidden div.group, then disable the display button once all rows have been displayed
});

名字
姓
彼得
格里芬
露易丝
格里芬
梅格
格里芬
斯特威
格里芬
$（“#显示”）。单击（函数（）{
//显示下一个隐藏的div.group，然后在显示所有行后禁用显示按钮
});

添加了一个用于隐藏元素的

隐藏类

您可以找到隐藏在表中的下一个X元素（使用
切片（0,2）
，您可以在其中使用任何您想要的数字），删除其中的
隐藏的
类，如果表中没有更多隐藏的元素，则将
隐藏的
类添加到您刚刚单击的按钮（以隐藏它）

以下是一个例子：


$（“#显示”）。单击（函数（）{
$（'#tblWithHiddenRows.hidden'）.slice（0,2）.removeClass（'hidden'）；
if（$（'#tblWithHiddenRows.hidden'）。长度==0）{
$（this.addClass（'hidden'）；
}
});
。隐藏{
显示：无；
}


名字
姓
彼得
格里芬
露易丝
格里芬
梅格
格里芬
斯特威
格里芬
添加了一个用于隐藏元素的
隐藏类

您可以找到隐藏在表中的下一个X元素（使用
切片（0,2）
，您可以在其中使用任何您想要的数字），删除其中的
隐藏的
类，如果表中没有更多隐藏的元素，则将
隐藏的
类添加到您刚刚单击的按钮（以隐藏它）

以下是一个例子：


$（“#显示”）。单击（函数（）{
$（'#tblWithHiddenRows.hidden'）.slice（0,2）.removeClass（'hidden'）；
if（$（'#tblWithHiddenRows.hidden'）。长度==0）{
$（this.addClass（'hidden'）；
}
});
。隐藏{
显示：无；
}


名字
姓
彼得
格里芬
露易丝
格里芬
梅格
格里芬
斯特威
格里芬
使用数据编号

并添加以下脚本：

num = 1;

$("#display").click(function() {
    row1 = $(".row[data-num='"+num+"']");
  row2 = $(".row[data-num='"+(num+1)+"']");

  if(row1.length>0)
    {
    row1.show();
        row2.show();
  }
  else
    $(this).addClass("disabled");

  num+=2;
});

使用数据编号

并添加以下脚本：

num = 1;

$("#display").click(function() {
    row1 = $(".row[data-num='"+num+"']");
  row2 = $(".row[data-num='"+(num+1)+"']");

  if(row1.length>0)
    {
    row1.show();
        row2.show();
  }
  else
    $(this).addClass("disabled");

  num+=2;
});

检查新的JSIDDLE链接检查新的JSIDDLE链接