当我提前知道颜色和表格长度的行数时如何在表格中交替显示多行颜色

Question

Im trying to alternate colors for multiple rows in a table. In advance i know the number of rows that i want to highlight, for example an array(8,8,9) tells me i want the first 8 rows one color and the next eight rows an alternating color and the last nine rows the first color again. he table length is 25 rows. My tables will change and my rows that i want colored can be array(4,4,5,5,5) for example. what is the best way of doing this in javascript or is there a jquery solution. I tried doing loops to no avail.

Answer 1

CSS is enough to do this. No need of javascript and jQuery.

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

Refer LIVE DEMO

Answer 2

Something like this will work:

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

The key is slice method to apply styles to specified tr ranges.

Demo: http://jsfiddle.net/39QvX/

Or another version using for loop:

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

Demo: http://jsfiddle.net/39QvX/2/