如何用单个.each()方法遍历div中所有表格的TH与TD单元格？

你之前遇到的只拿到第一个表格结果的问题，大概率是选择器的写法没覆盖到#contentdiv下的所有表格。其实用一个简单的选择器就能一次性选中所有目标单元格，再通过each()遍历并区分标签类型，具体实现如下：

核心实现代码 #

// 选中#contentdiv下所有表格里的<th>和<td>
$('#contentdiv table th, #contentdiv table td').each(function() {
    const $cell = $(this);
    // 区分当前单元格是TH还是TD
    if ($cell.is('th')) {
        // 处理表头单元格逻辑
        console.log('表头单元格内容：', $cell.text());
        // 示例操作：给表头添加高亮样式
        $cell.css('background-color', '#f0f0f0');
    } else {
        // 处理数据单元格逻辑
        console.log('数据单元格内容：', $cell.text());
        // 示例操作：给偶数行数据单元格添加隔行样式
        if ($cell.parent('tr').index() % 2 === 1) {
            $cell.css('background-color', '#f9f9f9');
        }
    }
});

额外说明 #

1. 为什么之前只拿到第一个表格？
   如果你之前的代码是类似$('#contentdiv table').find('th,td').each(...)，理论上也能拿到所有表格的单元格，但如果代码里不小心加了:first限制，或者在遍历过程中提前return false终止了循环，就会只处理第一个表格的内容。上面的写法直接把目标元素写在选择器里，更直观也不容易出错。

2. 排除嵌套表格的情况
   如果#contentdiv里存在嵌套表格，而你只想处理最外层表格的单元格，可以把选择器改成更精确的层级：

   $('#contentdiv table > tbody > tr > th, #contentdiv table > tbody > tr > td').each(function() {
       // 逻辑同上
   });
   

   这个选择器只会匹配直接属于外层表格行的单元格，忽略嵌套在子表格里的元素。

3. 原生JS写法（无需jQuery）
   要是项目里没引入jQuery，也可以用原生DOM API实现：

   const cells = document.querySelectorAll('#contentdiv table th, #contentdiv table td');
   cells.forEach(cell => {
       if (cell.tagName.toLowerCase() === 'th') {
           // 处理TH单元格逻辑
       } else {
           // 处理TD单元格逻辑
       }
   });
   

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