javascript - 如何使用 querySelectorAll() 查找表行的第一个单元格

Question

我正试图通过其数据属性值来定位一个表。然后我想找到第一个 <td>每个 <tr>在该表中，并为每个 <td> 添加一个类被选中。

我尝试了以下操作，但是我无法理解错误的根源:

var mprimary = document.querySelectorAll("[data='regMultipleTable']");
for (var i = 0; i < mprimary.rows.length; i++) {
   var firstTD = mprimary.rows[i].cells[0];
   firstTD.className = 'your-the-first';
}

我的表格是这样的:

<table data="regMultipleTable">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tbody>
</table>

我想用值 1、4、7 等来定位 td...请帮忙

Answer 1

您可以使用以下选择器来简化您的逻辑:

table[data='regMultipleTable'] td:first-child

这个选择器的意思是，“选择数据属性为‘regMultipleTable’的表中每个父(行)的第一个 td”。

在代码中，这可能看起来像:

var mprimary = document
.querySelectorAll("table[data='regMultipleTable'] td:first-child");

for (var node of mprimary) {
  
  node.classList.add("your-the-first");
}

.your-the-first {
  background:yellow;
}

<table data="regMultipleTable">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>