如何让jQuery仅对父表格直接子行着色？避免子表格行干扰

你只需要用直接子元素选择器（>）来限定只选中#table_id的直接子级<tr>（注意HTML中表格行默认会被浏览器自动包裹在<tbody>标签里，所以更准确的写法是选中<tbody>的直接子<tr>），修改着色代码即可：

$('#table_id > tbody > tr:odd').addClass("some_color_class");

原问题原因 #

原来的$('#table_id tr:odd')会匹配#table_id下所有层级的<tr>元素，包括子表格里的行，导致奇偶计数混乱，最终出现父表格相邻行颜色相同的问题。而直接子选择器>只会选择指定元素的直接子节点，不会深入到子表格内部，这样就能精准只对父表格的行进行奇偶着色。

修改后的完整代码示例 #

var table = $('#table_id');
var row;

for (i in data) { // 伪代码
    row = $('<tr>');

    // 添加常规单元格
    row.append( $("<td>").text(other_data) );

    // 添加子表格
    row.append( $("<td>").html(sub_table) );

    // 将行添加到表格
    table.append(row);
}

// 仅对父表格的直接子行进行奇数行着色
$('#table_id > tbody > tr:odd').addClass("some_color_class");

内容的提问来源于stack exchange，提问作者Izek H