使用jQuery为表格新增行的指定列单元格设置背景色

我来帮你搞定这个问题！你之前的代码之所以会把整行（除第一个单元格外）都设置背景色，是因为两次.not('td:eq(0)')只排除了第一个单元格，剩下的所有td都会被选中。要精准定位第17到22列的单元格，我们可以用更直接的范围选择方式。

核心思路 #

表格列数从1开始计数，但jQuery的元素索引是从0开始的，所以第17列对应索引16，第22列对应索引21。我们可以利用jQuery的.slice()方法选取这个范围内的单元格，或者用CSS的:nth-child选择器直接匹配列数范围。

方法一：使用.slice()（推荐，性能更优） #

先把行追加到表格，再选中该行内指定索引范围的td设置背景色：

// 假设row1是你已经构建好的<tr>元素，包含25个<td>
$("#table1").append(row1);
// 选取第17到22列的单元格（对应索引16到21）
$(row1).find('td').slice(16, 22).css("background-color", workcolor);

也可以用链式写法让代码更简洁：

$(row1).appendTo("#table1").find('td').slice(16, 22).css("background-color", workcolor);

.slice(startIndex, endIndex)是左闭右开的规则，所以slice(16,22)会包含索引16到21的所有元素，正好对应第17到22列。

方法二：使用:nth-child选择器 #

如果你习惯直接用列数（从1开始）来选择，可以用复合的:nth-child选择器：

$("#table1").append(row1);
// 直接匹配第17到22列的单元格
$(row1).find('td:nth-child(n+17):nth-child(-n+22)').css("background-color", workcolor);

这里的选择器逻辑是：

• nth-child(n+17)：选中第17列及之后的所有单元格
• nth-child(-n+22)：选中第22列及之前的所有单元格
  两者结合就精准定位了17到22列的范围。

为什么之前的代码失效？ #

你之前的代码：

$(row1).children('td').not('td:eq(0)').not('td:eq(0)').css({ "background-color": workcolor });

两次.not('td:eq(0)')其实只排除了第一个单元格，剩下的24个td都会被选中，所以整行除第一个单元格外都被设置了背景色，这和你想要的效果不符。

内容的提问来源于stack exchange，提问作者Jack Sparrow