当你有行时，备用行颜色 [英] Alternate row colors when you have rowspan

问题描述

我有这个HTML：

 < table class =altRowTable> 
 
< script type =text / javascript> 
 $（document）.ready（function（）{
 $（table.altRow tr：odd）。css（background-color，#DEDFDE）; 
} ）; 
< / script> 
  

直到我有一些行包含 rowspan （它在行之间是不一致的）。

所以我有类似的东西（下面的 - 代表一个空格 - 真的不能在表中执行） SOF :)）

  | --- ID --- | ---名称--- | --- Number- -  | 
 | --- 1 ---- | --- joe ---- | ----- 1 ------ | 
 | -------- | --- tom ---- | ----- 2 ------ | 
 | --- 2 ---- | --- joe ---- | ----- 3 ------ | 
 | --- 3 ---- | ---- joe ---- | ----- 4 ------ | 
 | --- 4 ---- | --- joe ---- | ----- 6 ------ | 
 | --- 5 ---- | ---- joe ---- | ----- 5 ------ | 
 | -------- | --- tom ---- | ----- 3 ------ | 
  

如何保留rowspan中的所有行相同的backcolor？

解决方案

可能有一种更简单的方法来做到这一点，但这里有一个方法： > $（table.altRow tr）。filter（function（）{
return $（this）.children（）。length == 3;
}）。filter （ '：甚至'）addClass（ 'ALT'）;

$（tr.alt td [rowspan]）。each（function（）{
$（this）.parent（）。nextAll（）。slice（0，this。 rowSpan - 1）.addClass（'alt'）;
}）;


这个使用CSS类而不是颜色，如下所示：

  .alt {background-color：#DEDFDE; } 
  

你可以在这里试试看，你可以交换：甚至和：odd 在第一个代码块中执行你想要的任何模式（例如，：odd 不能很好地说明，因为这是行没有 rowspan 个单元格）。

这个功能是用全部单元格，而不是部分行，得到这些单数或偶数行，并应用一个类。然后第二遍查看那些行，如果它们有任何 rowspan =单元格，它会得到 .rowSpan （DOM属性），当前行减1，并通过 .nextAll（） 和 .slice（） 。

I have this HTML:

<table class="altRowTable">

<script type="text/javascript">
  $(document).ready(function() {
    $("table.altRow tr:odd").css("background-color", "#DEDFDE");
  });
</script>

This works fine until I have some rows that contains a rowspan (it's not consistent across the rows).

So I have something like this (below "-" represents a space - can't really do tables in SOF :) )

|---ID---|---name---|---Number---|   
|---1----|---joe----|-----1------|   
|--------|---tom----|-----2------|   
|---2----|---joe----|-----3------|   
|---3----|---joe----|-----4------|   
|---4----|---joe----|-----6------|   
|---5----|---joe----|-----5------|   
|--------|---tom----|-----3------|   

How can i keep all the rows within the rowspan the same backcolor ?

解决方案

There may be a slicker way to do it, but here's one way:

$("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');
});

This uses a CSS class instead of the color, like this:

.alt { background-color​: #DEDFDE; }​

You can give it a try here, you can swap :even and :odd in the first code block to do whichever pattern you want (with the example, :odd doesn't illustrate it well, since that's the rows without rowspan cells).

What this does is find the rows with all the cells, not partial rows, gets the odd or even ones of those and applies a class. Then the second pass looks at those rows, and if they have any rowspan="" cells it gets that .rowSpan (DOM property), minus one for the current row, and applies the class that many rows down, via .nextAll() and .slice().

这篇关于当你有行时，备用行颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！