如何在点击时显示多个表格行答案

【问题标题】：How to show more than one table row on click如何在点击时显示多个表格行
【发布时间】：2016-08-16 15:31:30
【问题描述】：

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

这个问题与this 问题非常相似，只是我不能使用答案，因为 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
});

【问题讨论】：

标签： jquery html css

【解决方案1】：

添加了一个hidden 类用于隐藏元素。

您可以找到隐藏在表格中的下一个 X 元素（使用 slice(0,2)，您可以使用任何您想要的数字），删除它们的 hidden 类，如果没有更多隐藏元素在表格内 - 将 hidden 类添加到您刚刚单击的按钮（以隐藏它）。

这是一个例子：

$("#display").click(function() {
  $('#tblWithHiddenRows .hidden').slice(0, 2).removeClass('hidden');
  if ($('#tblWithHiddenRows .hidden').length == 0) {
    $(this).addClass('hidden');
  }
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a href="#" id="display">Display More</a></p>

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

【讨论】：

【解决方案2】：

使用数据编号<tr class="row secondRow" data-num="1">

并添加此脚本：

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

https://jsfiddle.net/22xh7bm7/1/

【讨论】：

检查新的 jsfiddle 链接