jquery – 当你有rowspan时替换行颜色

我有这个 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()应用多行向下的类.

原文地址：https://www.jb51.cc/jquery/178599.html