如何在JS中获取表格每行中class为bi的td元素的值？

问题根源 #

1. document.querySelector('.bi')的局限性：这个方法会返回整个文档中第一个匹配选择器的元素，所以循环多少次，输出的都是第一个.bi元素的内容。
2. rows[i].querySelector('.bi')返回null的原因：你的JS代码里用document.querySelector('#table')选择表格，但HTML中的<table>标签没有设置id="table"，导致table变量为null，后续rows获取失败，自然无法从行内找到元素。

修正后的代码 #

步骤1：修正HTML结构

给表格添加id="table"，让JS能正确选中目标表格：

<table id="table">
<tr>
<td>5.13</td>
<td>4.20</td>
<td class="bi">6.16</td>
 </tr>
<tr>
<td>1.13</td>
<td>4.10</td>
<td class="bi">7.20</td>
  </tr>
</table>

步骤2：正确遍历每行的.bi元素

let table = document.querySelector('#table');
let rows = table.rows;

for (let i = 0; i < rows.length; i++) {
  // 从当前行的上下文里查找.bi元素
  let redBlock = rows[i].querySelector('.bi');
  if (redBlock) { // 简化null判断
    console.log("redBlock: " + redBlock.innerHTML);
  }
}

更简洁的写法（直接获取所有.bi元素）

如果不需要单独处理每行，可直接选中表格内所有.bi元素遍历：

let biElements = document.querySelectorAll('#table .bi');
biElements.forEach(element => {
  console.log("redBlock: " + element.innerHTML);
});

输出结果 #

两种写法都会正确输出：

redBlock: 6.16
redBlock: 7.20

内容的提问来源于stack exchange，提问作者Виталий Юрьевич