當我提前知道顏色和表格長度的行數時如何在表格中交替顯示多行顏色

Question

我正在嘗試為表中的多行替換顏色。 事先我知道要突出顯示的行數，例如array（8,8,9）告訴我，我希望前8行使用一種顏色，而后8行使用交替顏色，而后9行使用第一種顏色再次上色。 表格長度為25行。 我的表將更改，並且我要着色的行可以是array（4,4,5,5,5）。 用javascript做到這一點的最佳方法是什么，還是有jquery解決方案？ 我試圖做循環無濟於事。

Answer 1

CSS足以做到這一點。 不需要javascript和jQuery。

tr:nth-child(even) {
   background-color: blue;
}
tr:nth-child(odd) {
   background-color: green;
}

請參考現場演示

Answer 2

這樣的事情會起作用：

var arr = [8, 8, 9];

var $tr = $('table tr');
var index = 0;

$.each(arr, function(i, el) {
    index = i > 0 ? arr[i - 1] + index : 0;
    $tr.slice(index, index + el).addClass(i % 2 ? 'even' : 'odd');
});

關鍵是將樣式應用於指定的tr范圍的切片方法。

演示： http ： //jsfiddle.net/39QvX/

或使用for循環的另一個版本：

for (var index = 0, i = 0; i < arr.length; index += arr[++i - 1] || 0) {
    $tr.slice(index, index + arr[i]).addClass(i % 2 ? 'even' : 'odd');
}

演示： http ： //jsfiddle.net/39QvX/2/