您好,我正在尝试创建一个动态表,它必须只显示 2 个元素(行),其他行需要隐藏,点击 showmore 时必须显示剩余的行。
谢谢
<table class="table borderless">
<thead>
<tr>
<th></th>
<th>Thead1</th>
<th>Thead2</th>
</tr>
</thead>
<tbody class="tbodySpace">
<tr>
<td>Row 1 - heading</td>
<td>
data1
</td>
<td>
data2
</td>
</tr>
<tr>
<td>Row 2 - heading</td>
<td>
data3
</td>
<td>
data4
</td>
</tr>
<tr>
<td>Row 3 - heading</td>
<td>
data3
</td>
<td>
data4
</td>
</tr>
</tbody>
</table>
<button class="button">Show more</button>
Jsfiddle 是 here
最佳答案
下面是点击按钮时显示 2 行的片段:
$("table tr:gt(2)").hide();
$(".button").on('click', function() {
var lastIndex = $("table tr:visible:last").index();
$("table tr").show();
$("table tr:gt(" + (lastIndex + 3) + ")").hide();
});
.table>tbody>tr>td {
padding: 15px!important;
}
.table>tbody>tr>td:not(:first-child) {
border-left: 1px solid #eee !important;
color: #07A4DD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table borderless">
<thead>
<tr>
<th></th>
<th>Thead1</th>
<th>Thead2</th>
</tr>
</thead>
<tbody class="tbodySpace">
<tr>
<td>Row 1 - heading</td>
<td>
data1
</td>
<td>
data2
</td>
</tr>
<tr>
<td>Row 2 - heading</td>
<td>
data3
</td>
<td>
data4
</td>
</tr>
<tr>
<td>Row 3 - heading</td>
<td>
data3
</td>
<td>
data4
</td>
</tr>
<tr>
<td>Row 4 - heading</td>
<td>
data3
</td>
<td>
data4
</td>
</tr>
<tr>
<td>Row 5 - heading</td>
<td>
data3
</td>
<td>
data4
</td>
</tr>
<tr>
<td>Row 6 - heading</td>
<td>
data3
</td>
<td>
data4
</td>
</tr>
<tr>
<td>Row 7 - heading</td>
<td>
data3
</td>
<td>
data4
</td>
</tr>
<tr>
<td>Row 8 - heading</td>
<td>
data3
</td>
<td>
data4
</td>
</tr>
</tbody>
</table>
<button class="button">Show more</button>
关于javascript - 根据各自的高度或内容显示更多和更少,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47258769/