如何通过TD索引获取行中追加TD的background-color（jQuery实现）

嘿，我来帮你搞定这个问题！你遇到的情况大概率是样式返回格式不匹配或者元素渲染时机不对导致的，下面给你一步步排查和修正的方案：

先排查几个核心问题 #

• 确认row1确实指向了目标<tr>元素：可以先加个console.log($(row1))，在控制台看看有没有选中正确的DOM节点，避免操作了空对象。
• 注意浏览器对透明背景的返回值差异：jQuery的.css('background-color')在不同浏览器里，可能返回transparent或者rgba(0,0,0,0)，你原来的代码只判断了后者，这会导致判断失效。
• 确保元素已经完成渲染：如果是刚用.append()追加完行就立刻执行这段代码，可能DOM还没更新完成，样式还没被计算，这时候获取到的就是默认值。

修正后的代码示例 #

方案1：兼容透明背景的返回格式 #

把判断逻辑改成同时兼容两种透明值，并且增加元素存在性检查，避免无限循环：

// 先把row1转为jQuery对象，方便操作
const $targetRow = $(row1);
while (true) {
    // 通过:nth-child获取目标TD（注意:nth-child是1-based索引）
    const $targetTd = $targetRow.children(`td:nth-child(${startIndex})`);
    // 如果找不到对应的TD，直接跳出循环，防止死循环
    if (!$targetTd.length) break;
    
    const bgColor = $targetTd.css('background-color');
    // 同时判断两种透明情况，找到非透明的TD就停止
    if (bgColor !== 'transparent' && bgColor !== 'rgba(0,0,0,0)') {
        break;
    }
    startIndex++;
}

方案2：用.eq()通过索引获取TD（更直观） #

.eq()的索引是0-based的，和我们平时常用的数组索引一致，如果你习惯从0开始计数的话，可以这么写：

const $targetRow = $(row1);
while (true) {
    // eq的索引是0开始，所以如果startIndex是1-based的话，要减1
    const $targetTd = $targetRow.children('td').eq(startIndex - 1);
    if (!$targetTd.length) break;
    
    const bgColor = $targetTd.css('background-color');
    if (bgColor !== 'transparent' && bgColor !== 'rgba(0,0,0,0)') {
        break;
    }
    startIndex++;
}

额外提示 #

如果你的TD背景色是通过CSS类设置的（不是内联样式），不用担心，.css()方法会自动获取计算后的最终样式，只要元素已经在DOM中就行。如果是刚追加完元素就执行代码，建议把这段逻辑放在setTimeout(() => { /* 你的代码 */ }, 0)里，确保DOM更新完成后再执行。

内容的提问来源于stack exchange，提问作者jack var