Question

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

Answer 1

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

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

以下是一个例子：

＆＃13;

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

＆＃13;

.hidden {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

使用data-num <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/

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

2 个答案: