Striped tables

Breakdown

• Find all the tables in a document
• Loop through every table
• Find all the rows in the current table
• Loop through every second row
• Set the background colour of that row

Breakdown by method

• Find all the tables in a document getElementsByTagName
• Loop through every table getElementsByTagName
• Find all the rows in the current table
• Loop through every second row
• Set the background colour of that row

Code

var tables = document.getElementsByTagName("table");
for (var i=0; i<tables.length; i++) {
  var rows = tables[i].getElementsByTagName("tr");
  for (var j=0; j<rows.length; j=j+2) {
    rows[j].style.backgroundColor = "#ccc";
  }
}

A better breakdown

• Find all the tables in a document
• Loop through every table
• Find all the rows in the current table
• Loop through every second row
• Give the row a class of "odd"

Code

var tables = document.getElementsByTagName("table");
for (var i=0; i<tables.length; i++) {
  var rows = tables[i].getElementsByTagName("tr");
  for (var j=0; j<rows.length; j=j+2) {
    rows[j].className = "odd";
  }
}

Code with object detection

if (document.getElementsByTagName) {
  var tables = document.getElementsByTagName("table");
  for (var i=0; i<tables.length; i++) {
    var rows = tables[i].getElementsByTagName("tr");
    for (var j=0; j<rows.length; j=j+2) {
      rows[j].className = "odd";
    }
  }
}

Finished example

Create a striped effect for tables of data.

View HTML