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...请帮助

标签： javascripthtml

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>