使用jQuery动态隐藏表行 [英] Dynamically hiding table rows with jQuery
问题描述
我尝试替换表格行的背景颜色,每个部分以相同的颜色开始。我已经实现了这个与下面的代码:
I am trying to alternate background colors of table rows, each section starting with the same color. I have achieved this with the following code:
$(document).ready(function(){ $("tbody tr.row:nth-child(even)").css("background", "#efefef"); });
我还需要能够限制在内部可见的行数每个部分。这些需要能够用带有.click()事件的按钮切换。有谁知道我怎么可以实现这一点?我唯一的解决方案,我想出了导致背景颜色破碎。
I also need to be able to limit the number of rows (5 for example) that are visible inside each tbody section. These need to be able to be toggled with a button with a .click() event. Does anyone know how I could achieve this? The only solutions I have come up with caused the background colors to break. Any help would be greatly appreciated!
以下是表结构的示例:
<table>
<tbody>
<tr>
<td>Cell Contents</td>
<td>Cell Contents</td>
</tr>
<tr>
<td>Cell Contents</td>
<td>Cell Contents</td>
</tr>
<tr>
<td>Cell Contents</td>
<td>Cell Contents</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Cell Contents</td>
<td>Cell Contents</td>
</tr>
<tr>
<td>Cell Contents</td>
<td>Cell Contents</td>
</tr>
<tr>
<td>Cell Contents</td>
<td>Cell Contents</td>
</tr>
</tbody>
</table>
推荐答案
b
$ b
This should do the trick:
$(function() {
$('#showAll').click(function() {
$('table > tbody').each(function() {
$(this).children('tr:gt(4)').toggle();
});
$("tr:visible").filter(':odd').css("background", "#efefef").end()
.filter(':even').css("background", "#ffffff");
}).click();
});
编辑清除代码(受@ karim79的回答启发)。
Edited to clean up code (inspired by @karim79's answer).
这篇关于使用jQuery动态隐藏表行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!