Javascript 使用jQuery更改表单元格的背景色

我有一个6行x列的表格。我需要将单元格的背景颜色更改为数组中包含的颜色。颜色索引与应绘制的行数匹配。我有下一组颜色：

var arr = ["lightgreen", "orange", "red"];

和我的jQuery脚本：

$.each(arr, function(index, val) {
$("tr:eq(" + (index) + ")").css("background-color", val);
});

这段代码只使用不同的颜色绘制前三行。 我需要这样的输出表：

lightgreen lightgreen lightgreen lightgreen
orange orange orange orange
orange orange orange orange
red red red red
red red red red
red red red red

var arr = ["lightgreen", "orange", "red"];
var $rows = $('tr');
var nextRow = 0;
$.each(arr, function(index, val) {
    for (var i = 0; i < index + 1; i++) {
    $rows.eq(nextRow++).css("background-color", val);
  }
});

My JSFIDLE:

您希望每次处理N行，而使用

$（“tr:eq（“+（index）+”）时

仅选择唯一的第N行

您可以这样实现：

lightgreen lightgreen lightgreen lightgreen
orange orange orange orange
orange orange orange orange
red red red red
red red red red
red red red red

var arr = ["lightgreen", "orange", "red"];
var $rows = $('tr');
var nextRow = 0;
$.each(arr, function(index, val) {
    for (var i = 0; i < index + 1; i++) {
    $rows.eq(nextRow++).css("background-color", val);
  }
});

var arr=[“浅绿色”、“橙色”、“红色”]；
var$rows=$（'tr'）；
var-nextRow=0；
$。每个（arr，函数（索引，val）{
对于（变量i=0；i

---

对于更一般的用途，请注意，应该对其进行增强，以正确处理数组长度和行数之间的差异：目前它假定正好有

（1+2+…+N）

行

修改了阿齐姆的asnwer

var arr = ["lightgreen", "orange", "red"];
var tr = $('table tr');

for (var i=0; i<tr.length; i++){
  $(tr[i]).css("background-color", arr[i]);
   if (i>2){
        $(tr[i]).css("background-color", arr[2]);
  }    
}

var arr=[“浅绿色”、“橙色”、“红色”]；
var tr=$（‘表tr’）；
对于（var i=0；i2）{
$（tr[i]）.css（“背景色”，arr[2]）；
}    
}

---

仅使用css可能更有效，但我猜JQuery是必须的？

您应该保留需要跳过多少行的数字：

var arr = ["lightgreen", "orange", "red"];
var skip = 0;
$.each(arr, function(index, val) {
    var _repeat = index+1; // js arrays are zero indexed
    for (var i = 0; i < _repeat; i++) 
        $("tr:eq(" + (i+skip) + ")").css("background-color", val);
  skip = skip + _repeat;
});

var arr=[“浅绿色”、“橙色”、“红色”]；
var-skip=0；
$。每个（arr，函数（索引，val）{
var _repeat=index+1；//js数组的索引为零
对于（变量i=0；i<\u repeat；i++）
$（“tr:eq（“+（i+skip）+”）.css（“背景色”，val）；
跳过=跳过+重复；
});

---

虽然您已经接受了这个问题的答案，但我想我应该使用纯JavaScript，而不是库，以备不时之需

请注意，我已经使用了一些ECMAScript 6功能、“胖箭头”语法和

Array.from（）

（请参见下面的参考资料），不过我会发布一个替代方案（在我回答的“主要”部分下方，以显示一个替代实现，如果您现在还不想使用ES6）

也就是说，我自己的解决方案如下：

// the colors Array:
var colors = ["lightgreen", "orange", "red"],
// a reference to the <table> element that is
// to be coloured:
  table = document.querySelector('table');

// declaring the relevant function to handle the 
// colouring:
function colorNRows(arr, table) {

  // caching the rows of the table:
  var rows = table.rows,

  // using Array.from() to convert the HTMLCollection
  // into an Array:
    clone = Array.from(rows),

  // iterating over the array of colours, using
  // Array.prototype.map(),
  // row:   the array-element of the array over which
  //        we're iterating,
  // index: the index of the current array-element
  //        in that array,
  // array: (unused here), the array over which we're
  //        iterating.
    segments = arr.map(function(row, index, array) {

      // removing 'index+1' elements of the array from
      // the clone Array, starting at index 0 and
      // returning the removed row(s) to form a new
      // Array:
      return clone.splice(0, index + 1);

    // iterating over the newly-formed Array,
    // using Array.prototype.forEach();
    // the automagically-passed array-elements
    // are, as above, the array-element (of the new
    // array) and the index of the current
    // array-element (in that array):
    }).forEach(function(rowSegments, index) {

      // here we iterate over the array(s) held
      // in each array-element, again using the
      // automagic variables are the same as above
      // relative to the current array.

      // we're using the 'fat arrow' syntax to pass
      // the array-element (toColor) into the
      // the process on the right hand side, thereby
      // styling the backgroundColor of each array-element
      // (a <tr>) according to the color held in the 'arr'
      // array, at the index held in the outer forEach():
      rowSegments.forEach(toColor => toColor.style.backgroundColor = arr[index]);
    });
}

// calling the function:
colorNRows(colors, table);

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

您为什么希望得到这样的输出？你想要实现的逻辑是什么？因为如果没有这一点，就很难将其外推到任何其他通用情况，或者在没有硬编码的情况下回答这个问题。