在多個父節點及其子節點上執行js回圈

我正在嘗試將列類分配給表。我動態執行此操作的原因是因為存在添加/洗掉功能，因此我需要動態重新分配類。

下面是一個表結構的例子：

<table>
    <tbody id="table-body">
        <tr class="row">
            <td>Row 1 - Column A</td>
            <td>Row 1 - Column B</td>
            <td>Row 1 - Column C</td>
        </tr>

        <tr class="row"> 
            <td>Row 2 - Column A</td>
            <td>Row 2 - Column B</td>
            <td>Row 2 - Column C</td>
        </tr>
        <tr class="row">
            <td>Row 3 - Column A</td>
            <td>Row 3 - Column B</td>
            <td>Row 3 - Column C</td>
        </tr>
    </tboady>
</table>

我正在努力實作以下目標：

<table>
    <tbody id="table-body">
        <tr class="row">
            <td class="a">Row 1 - Column A</td>
            <td class="b">Row 1 - Column B</td>
            <td class="c">Row 1 - Column C</td>
        </tr>

        <tr class="row"> 
            <td class="a">Row 2 - Column A</td>
            <td class="b">Row 2 - Column B</td>
            <td class="c">Row 2 - Column C</td>
        </tr>
        <tr class="row">
            <td class="a">Row 3 - Column A</td>
            <td class="b">Row 3 - Column B</td>
            <td class="c">Row 3 - Column C</td>
        </tr>
    </tboady>
</table>

我創建了一個 For 回圈來遍歷每一行并分配類，但是我遇到的問題是 for 回圈繼續遍歷所有元素而不是回圈每一行，并且我分配了錯誤的類。

 function updateColumnClasses() {
     var columnCountLetters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
     var elements = document.querySelectorAll('.row td');
     for (var i = 0; i < elements.length; i  ) {
         elements[i].setAttribute("class", columnCountLetters[i]);
     }
}

// Result
<table>
    <tbody id="table-body">
        <tr class="row">
            <td class="a">Row 1 - Column A</td>
            <td class="b">Row 1 - Column B</td>
            <td class="c">Row 1 - Column C</td>
        </tr>

        <tr class="row"> 
            <td class="d">Row 2 - Column A</td>
            <td class="e">Row 2 - Column B</td>
            <td class="f">Row 2 - Column C</td>
        </tr>
        <tr class="row">
            <td class="g">Row 3 - Column A</td>
            <td class="h">Row 3 - Column B</td>
            <td class="i">Row 3 - Column C</td>
        </tr>
    </tboady>
</table>

uj5u.com熱心網友回復：

您可以回圈每個 tr元素并獲取 child tds

function updateColumnClasses() {
     var columnCountLetters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
     const trElms = document.querySelectorAll('.row');
     trElms.forEach(tr => {
       for (var i = 0; i < tr.children.length; i  ) {
          tr.children[i].setAttribute("class", columnCountLetters[i]);
       }    
     });
}

updateColumnClasses();

.a {
color: red;
}

.b {
color:green;
}
.c {
color: blue;
}

<table>
    <tbody id="table-body">
        <tr class="row">
            <td>Row 1 - Column A</td>
            <td>Row 1 - Column B</td>
            <td>Row 1 - Column C</td>
        </tr>

        <tr class="row"> 
            <td>Row 2 - Column A</td>
            <td>Row 2 - Column B</td>
            <td>Row 2 - Column C</td>
        </tr>
        <tr class="row">
            <td>Row 3 - Column A</td>
            <td>Row 3 - Column B</td>
            <td>Row 3 - Column C</td>
        </tr>
    </tboady>
</table>

uj5u.com熱心網友回復：

你可以簡單地這樣做：

const columnCountLetters = 'abcdefghijklmnopqrstuvwxyz'

document.querySelectorAll('#table-body > tr.row').forEach(TR=>
  {
  for(let c = 0; c < TR.cells.length; c  )
    TR.cells[c].className = columnCountLetters[c]
  })

.a { color : green }
.b { color : red }
.c { color : blue }

<table>
  <tbody id="table-body">
      <tr class="row">
          <td>Row 1 - Column A</td>
          <td>Row 1 - Column B</td>
          <td>Row 1 - Column C</td>
      </tr>

      <tr class="row"> 
          <td>Row 2 - Column A</td>
          <td>Row 2 - Column B</td>
          <td>Row 2 - Column C</td>
      </tr>
      <tr class="row">
          <td>Row 3 - Column A</td>
          <td>Row 3 - Column B</td>
          <td>Row 3 - Column C</td>
      </tr>
  </tbody>
</table>

標籤：javascript 循环

上一篇：代碼卡在回圈編號34/100“exp中遇到溢位”

下一篇：如何在for回圈中參考嵌套串列中的元素？