How TO walk an html table with Javascript and the DOM

I searched all over the net and could only find bits and parts of what I needed to know in order to walk a table with javascript.  I have some projects lately wherein the onload methods add things to a table such as onclick handlers and images.  So I'm writing this quick howto in hopes that someone else might find it useful.


var tables= document.getElementsByTagName('table')    
for (var i in tables)
{
  var cn = tables[i].className;
  if (cn.match(/targetClass/) != null)
   {
     alert('Found table with class targetClass');
   }
}
 The first thing you must do is get a reference to the table itself.  In my case the tables have a class assigned to them so I started with that.


There is a bug in this code and I dont understand it. But it does work.

className is the classes that are assigned to an object.  In this case we test the className against the class that we are looking for.  When we find a match we execute the code we want.

If we need to add things to particular parts of the table we need to walk down through the table.  In one case I needed to add an onclick handler to every row in a table.

function hyperRows(table)
{
  var rows = table.getElementsByTagName('tr');
  for (var i in rows)
  {
    rows[i].onclick = new Function ("rowClick(this)");
    }
  }
}

In this case I passed the reference to the table into the function.  Next I use getElementsByTagName to get all of the rows.  using for (var i in rows) I can walk each row and assign the onclick function.  Notice that the row object has an attribute called onclick which gets assigned new Function.  The function calls another function rowClick and passes this as the parameter.  this will be the row that is clicked.  After this assignment is made we can click on a row of the table to activate the rowClick function.

Next I needed to differentiate between the headings in the table and the rest of the rows.  Again my table has classes assigned for the header and the rows.

Headers
function hyperRows(table)
{
  var rows = table.getElementsByTagName('tr');
  for (var i in (rows))
  {
    var row = rows[i];
    if (row.className != null)
    {
      if (row.className == 'header')
      {
          row.onclick = new Function ("headerClick(this)");
      }
      else
      {
        rows[i].onclick = new Function ("rowClick(this)");
      }
    }
  }
}
The header row has a different class.  You should get different data when you click it.

The headings in each column need a different onclick handler so we can act differently based on the column clicked.

Number
 Code
 Notes
1
 function hyperRows(table)
{
  var rows = table.getElementsByTagName('tr');
  for (var i in (rows))
  {
    var row = rows[i];
    if (row.className != null)
    {
      if (row.className == 'header')
      {
       //walk and put headerClick on each th
       var ths = row.getElementsByTagName('th');
       for (var j in ths)
       {
         ths[j].onclick = new Function ("headerClick(this)");
        }
      }
      else
      {
        rows[i].onclick = new Function ("rowClick(this)");
      }
    }
  }
}

 This time each header has a different class.  You should get different results when you click them.  If the row is not a header we just add the normal rowClick to the whole row.