stripe table with Javascript

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css" title="text/css">
table {
  border-top: 1px solid #c9c9c9;
  border-left: 1px solid #c9c9c9;
}

caption {
  padding: 0 0 10px;
  font: bold 120% Arial, sans-serif;
  text-transform: uppercase;
}

th {
  background: red;
  text-align: left;
  padding: 2px 5px;
  font-weight: bold;
  border-bottom: 1px solid #666666;
}

th,td {
  border-right: 1px solid #c9c9c9;
  font: 80% Verdana, Arial, sans-serif;
}

tfoot {
  background-color: #666666;
  color: #dddddd;
  font-size: 80%;
}

table {
  border: 1px solid #666666;
}

tfoot td {
  border-bottom: 0;
  border-right: 0;
}
</style>
    <script type="text/javascript">
  function hasClass(obj) {
     var result = false;
     if (obj.getAttributeNode("class") != null) {
         result = obj.getAttributeNode("class").value;
     }
     return result;
  }   

 function stripe(id) {
    var even = false;
    var evenColor = "#fff";
    var oddColor = "#eee";
  
    var table = document.getElementById(id);
   
    var tbodies = table.getElementsByTagName("tbody");
    for (var j = 0; j < tbodies.length; j++) {
      var trs = tbodies[j].getElementsByTagName("tr");
      for (var i = 0; i < trs.length; i++) {
      if (!hasClass(trs[i]) && ! trs[i].style.backgroundColor) {
          var tds = trs[i].getElementsByTagName("td");
          for (var j = 0; j < tds.length; j++) {
            var mytd = tds[j];
          if (! hasClass(mytd) && ! mytd.style.backgroundColor) {
          mytd.style.backgroundColor = even ? evenColor : oddColor;
            }
          }
        }
        even =  ! even;
      }
    }
  }
    
    </script>
</head>
<body onload="stripe('playlist');">
    <table id="playlist" width="90%" border="0" cellpadding="2" cellspacing="0" summary="A playlist">
        <caption>
            A playlist of great music
        </caption>
        <thead>
            <tr>
                <th>Song Name</th>
                <th>Time</th>
                <th>Artist</th>
                <th>Album</th>
                <th>Play Count</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="5">Music selection</td>
            </tr>
        </tfoot>
        <tbody>
            <tr><td>A</td><td>2:35</td><td>A</td><td>A</td><td>7</td></tr>
            <tr><td>B</td><td>2:35</td><td>B</td><td>B</td><td>7</td></tr>
            <tr><td>C</td><td>2:35</td><td>C</td><td>C</td><td>7</td></tr>
            <tr><td>D</td><td>2:35</td><td>D</td><td>D</td><td>7</td></tr>            
            <tr><td>E</td><td>2:35</td><td>E</td><td>E</td><td>7</td></tr>
            <tr><td>F</td><td>2:35</td><td>F</td><td>F</td><td>7</td></tr>
            <tr><td>G</td><td>2:35</td><td>G</td><td>G</td><td>7</td></tr>
            <tr><td>H</td><td>2:35</td><td>H</td><td>H</td><td>7</td></tr>
            <tr><td>I</td><td>2:35</td><td>I</td><td>I</td><td>7</td></tr>
            <tr><td>J</td><td>2:35</td><td>J</td><td>J</td><td>7</td></tr>
            <tr><td>K</td><td>2:35</td><td>K</td><td>K</td><td>7</td></tr>
            <tr><td>L</td><td>2:35</td><td>L</td><td>L</td><td>7</td></tr>
        </tbody>
    </table>
</body>
</html>

Related examples in the same category

1.	'tr' Example
2.	table row with class
3.	Table style for even rows
4.	Set different colors for even and odd table row
5.	table row background
6.	table row hover
7.	Coloring Rows in a Table
8.	Selecting cells in row
9.	Alternating Row Background
10.	Alternating row colors
11.	Table with subtotoal row
12.	Hiding row
13.	tr height: 30px;
14.	tr background: #EFEFEF;
15.	tr background: url(img/menubg2.gif) repeat-x bottom left #eaeaea;
16.	tr color: #505050;
17.	tr padding: 7px;
18.	tr text-align: left;
19.	Highlighting rows with mouse move

stripe table with Javascript : tr « Tags « HTML / CSS

Related examples in the same category