我有这个
HTML：
<table class="altRowTable">
<script type="text/javascript">
$(document).ready(function() {
$("table.altRow tr:odd").css("background-color","#DEDFDE");
});
</script>
这工作正常,直到我有一些包含rowspan的行(它在行之间不一致).
所以我有这样的东西(下面的“ – ”表示一个空格 – 在SOF中不能真正做表:))
|---ID---|---name---|---Number---| |---1----|---joe----|-----1------| |--------|---tom----|-----2------| |---2----|---joe----|-----3------| |---3----|---joe----|-----4------| |---4----|---joe----|-----6------| |---5----|---joe----|-----5------| |--------|---tom----|-----3------|
如何将rowspan中的所有行保持相同的背景颜色？
解决方法
可能有一种更为灵巧的方式,但这是一种方式：
$("table.altRow tr").filter(function() {
return $(this).children().length == 3;
}).filter(':even').addClass('alt');
$("tr.alt td[rowspan]").each(function() {
$(this).parent().nextAll().slice(0,this.rowSpan - 1).addClass('alt');
});
这使用CSS类而不是颜色,如下所示：
.alt { background-color: #DEDFDE; }
You can give it a try here,您可以在第一个代码块中交换：even和：odd来执行您想要的任何模式(例如,：odd不能很好地说明它,因为那是没有rowspan单元格的行).
这样做的是找到包含所有单元格而不是部分行的行,获取奇数或偶数行,并应用一个类.然后第二遍查看那些行,如果它们有任何rowspan =“”单元格,它将获得.rowSpan(DOM属性),减去当前行的一行,并通过.nextAll()和.slice()应用多行向下的类.
