如何使用querySelectorAll（）查找表行的第一個單元格

Question

我試圖通過其數據屬性值來定位表。 然后，我想找到該表中每個<tr>的第一個<td> ，並為每個選中的<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

這個選擇器意味着“選擇表中每個父（行）的第一個td，數據屬性為'regMultipleTable'”。

在代碼中，這可能看起來像：

 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> 

Answer 2

querySelectorAll()返回具有該data屬性的所有表的列表。

如果可以有多個這樣的表，則需要循環它們。

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

如果只應該有一個表，只需使用querySelector而不是querySelectorAll 。 它返回單個元素而不是列表。

Answer 3

如果您正在使用該類創建border ， background ， width或visibility樣式，則可以在表中放置<col>元素並將該類應用於該類：

 .highlight { background-color: yellow; } 

 <table data="regMultipleTable"> <col class="highlight"> <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> 

Answer 4

如果項目中有jquery，則可以使用一行

$("table[data='regMultipleTable'] tr td:first").addClass("your-the-first")

在@charlietfl評論之后;

$("table[data='regMultipleTable']").find("tr").find("td:first").addClass("your-the-first")

更好。