Execute js loop on multiple parent nodes and their children-CodePudding

I am trying to assign column classes to a table. The reason I am doing this on the fly is because there is adding/removing functionality and so I need to reassign classes dynamically.

Here is an example of the table structure:

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

        <tr > 
            <td>Row 2 - Column A</td>
            <td>Row 2 - Column B</td>
            <td>Row 2 - Column C</td>
        </tr>
        <tr >
            <td>Row 3 - Column A</td>
            <td>Row 3 - Column B</td>
            <td>Row 3 - Column C</td>
        </tr>
    </tboady>
</table>

And I am trying to achieve the following:

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

        <tr > 
            <td >Row 2 - Column A</td>
            <td >Row 2 - Column B</td>
            <td >Row 2 - Column C</td>
        </tr>
        <tr >
            <td >Row 3 - Column A</td>
            <td >Row 3 - Column B</td>
            <td >Row 3 - Column C</td>
        </tr>
    </tboady>
</table>

I have created a For Loop to go through each row and assign the classes however the issue I am having is that instead of looping each row the for loop continues through all elements and I am getting the wrong classes assigned.

 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 >
            <td >Row 1 - Column A</td>
            <td >Row 1 - Column B</td>
            <td >Row 1 - Column C</td>
        </tr>

        <tr > 
            <td >Row 2 - Column A</td>
            <td >Row 2 - Column B</td>
            <td >Row 2 - Column C</td>
        </tr>
        <tr >
            <td >Row 3 - Column A</td>
            <td >Row 3 - Column B</td>
            <td >Row 3 - Column C</td>
        </tr>
    </tboady>
</table>

CodePudding user response：

You can loop each tr elements and get the 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 >
            <td>Row 1 - Column A</td>
            <td>Row 1 - Column B</td>
            <td>Row 1 - Column C</td>
        </tr>

        <tr > 
            <td>Row 2 - Column A</td>
            <td>Row 2 - Column B</td>
            <td>Row 2 - Column C</td>
        </tr>
        <tr >
            <td>Row 3 - Column A</td>
            <td>Row 3 - Column B</td>
            <td>Row 3 - Column C</td>
        </tr>
    </tboady>
</table>

CodePudding user response：

you can simply do that:

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 >
          <td>Row 1 - Column A</td>
          <td>Row 1 - Column B</td>
          <td>Row 1 - Column C</td>
      </tr>

      <tr > 
          <td>Row 2 - Column A</td>
          <td>Row 2 - Column B</td>
          <td>Row 2 - Column C</td>
      </tr>
      <tr >
          <td>Row 3 - Column A</td>
          <td>Row 3 - Column B</td>
          <td>Row 3 - Column C</td>
      </tr>
  </tbody>
</table>