Javascript Access to Only Header, Body or Footer Rows One at a Time

November 29, 2022

I have a need to traverse (using javascript) the sections of each table’s rows individually. Meaning that I need to traverse the THEAD rows first, then the TBODY rows, and finally the TFOOT rows.

What I need to do requires far more complexity than just coloring the boxes, but for the purpose of this example i’m just trying to color the thead rows red, the tbody rows green and the tfoot rows yellow. If I can get these loops working for the rows for each section I can then take over from there to do the rest of the coding.

I’ve tried the below but it does not work (it tells me "rows is not defined"). Could someone fix the ColorBoxes() function code to get this to work? Just please do not give me CSS answers here because that does not solve the problem – I need to traverse through the rows of each section. Thanks!

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
<script language='javascript'>
function ColorBoxes()
{
   var tbl = document.getElementById('MyTable');
   for (var nRow = 0; nRow < tbl.tHead[0].rows; nRow++)
   {
     tbl.tHead[0].row[nRow].style.backgroundColor = 'red';
   }
   for (var nRow = 0; nRow < tbl.tBody[0].rows; nRow++)
   {
     tbl.tBody[0].row[nRow].style.backgroundColor = 'green';
   }
   for (var nRow = 0; nRow < tbl.tFoot[0].rows; nRow++)
   {
     tbl.tFoot[0].row[nRow].style.backgroundColor = 'yellow';
   }
}
</script>
</head>
<body onLoad='ColorBoxes()'>

<h1>The thead, tbody, and tfoot elements</h1>

<table id='MyTable'>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
    <tr>
      <th>Name</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

</body>
</html>

>Solution :

You could do something like this. Using explicit selectors might help you reason with your loops a little better.

function ColorBoxes() {
  const table = document.querySelector('#MyTable')
  const thead_tr = table.querySelectorAll('thead tr')
  const tbody_tr = table.querySelectorAll('tbody tr')
  const tfoot_tr = table.querySelectorAll('tfoot tr')

  thead_tr.forEach(row => {
    row.style.backgroundColor = 'red'
  })
  tbody_tr.forEach(row => {
    row.style.backgroundColor = 'green'
  })
  tfoot_tr.forEach(row => {
    row.style.backgroundColor = 'yellow'
  })
}
ColorBoxes()

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <h1>The thead, tbody, and tfoot elements</h1>

  <table id='MyTable'>
    <thead>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <th>Name</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Sum</td>
        <td>$180</td>
      </tr>
    </tfoot>
  </table>

</body>

</html>