我正在尝试替换表行的背景颜色,每个部分都以相同的颜色开始。我通过以下代码实现了这一点:
$(document).ready(function(){ $("tbody tr.row:nth-child(even)").css("background", "#efefef"); });
我还需要能够限制每个 tbody 部分内可见的行数(例如 5 行)。这些需要能够通过带有 .click() 事件的按钮进行切换。有谁知道我怎样才能实现这一目标?我想出的唯一解决方案导致背景颜色破裂。任何帮助将不胜感激!
这是表结构的示例:
<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>
这应该可以解决问题:
$(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的答案的启发)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)