Question

我正在努力改进我们目前拥有的旧学校“Top Screens”页面。它显示了普通旧html表中的前30个。我希望能够生成前100名的表格，但只显示页面加载的前20名，然后有一个展开/折叠按钮。我已经找到了很多完全扩展和折叠表和子表的例子，但我还没有找到一个像我需要的那样部分地做一个例子。

它目前是一个非常简单的2列表，带有标题和最小的CSS样式和JS。如果可能的话，我想把它保存到普通的JS中，但我确实可以使用JQuery库，我对它不是很熟悉。

任何帮助将不胜感激。提前谢谢！

修改

我为JQuery最终成为一个相对简单的解决方案道歉，但我对它很新。在阅读了API文档之后，我发现了：gt（）选择器，当与toggle（）结合使用时，我会为任何可能感兴趣的人添加一个优雅的解决方案。

我将“崩溃”类添加到我的＆lt; tbody＆gt;所以＆lt; thead＆gt;不会受到影响或计算。

// Hide extra rows on load.
$(document).ready(function() {
    $(".collapse").find('tr:gt(19)').hide();
});

// Toggle extra rows on click.
$(".collapse").click(function(){
    $(this).find('tr:gt(19)').toggle();
});

Answer 1

最简单的方法是使用jQuery，因为你可以使用.toggle()方法。

在我的示例中，我选择仅显示前3个结果，因此代码不会太长。

在代码中查看我的评论以了解正在发生的事情。

$(document).ready(function() {
  $("button#sh").click(function() {
    $("tr.row:nth-child(n+5)").toggle();
  });
});

//Here jQuery listens for a click on the button with id "sh", and when clicked, 
//either shows or hides the rows selected by the CSS selector, which is the same as 
//the one that hid the rows in the CSS section.

tr.row:nth-child(n+5) {
  display: none
}
/* Here all rows after the 4th one will be hidden on load. So you have 1 row for the 
header, then 3 rows of data, 3+1=4, so row 5 and on will be hidden. */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here jQuery is included -->

<button id="sh">Show/Hide</button>
<!-- Here the button that will show and hide the rows is set. -->

<table border="1">
  <tr class="row">
    <td>Name</td>
    <td>Number</td>
  </tr>
  <tr class="row">
    <td>Name 1</td>
    <td>1</td>
  </tr>
  <tr class="row">
    <td>Name 2</td>
    <td>2</td>
  </tr>
  <tr class="row">
    <td>Name 3</td>
    <td>3</td>
  </tr>
  <tr class="row">
    <td>Name 4</td>
    <td>4</td>
  </tr>
  <tr class="row">
    <td>Name 5</td>
    <td>5</td>
  </tr>
  <tr class="row">
    <td>Name 6</td>
    <td>6</td>
  </tr>
</table>

如何创建部分扩展/折叠的html表？

1 个答案: