A method of using JavaScript or CSS to change the color of table interlacing

A method of using web effects or CSS tutorials to change the form of interlacing

Below we use CSS and JS to achieve the form of interlacing color method, the following look at the code

<table width= "border=" 0 "cellpadding=" 0 "cellspacing=" 0 ">
<tr>
<td> do not change color </td>
</tr>
<tbody id= "Goaler" >
<tr>
<td>xxxxxxxx</td>
</tr>
<tr>
<td>xxxxxxxx</td>
</tr>
<tr>
<td>xxxxxxxx</td>
</tr>
<tr>
<td>xxxxxxxx</td>
</tr>
</tbody>
<tr>
<td> do not change color </td>
</tr>
</table>
<script language= "JavaScript" >
<!--
var tbrow = document.getElementById ("goaler");
if (Tbrow!= null)
{
for (var i=0;i<tbrow.rows.length; i++)
{
if (tbrow.rows[i].rowindex%2==1)
{
Tbrow.rows[i].style.backgroundcolor= "";
}
Else
{
Tbrow.rows[i].style.backgroundcolor= "#F1F1F1";
}
}
}
-->
</script>

CSS Implementation method

<style type= "Text/css" >
<!--
TR {background-color:expression (this.sectionrowindex%2==0)? Red ": Blue")}
TD {Background-color:expression (this.cellindex%2==0)? "":( (this.parentelement.sectionrowindex%2==0)? " Green ":" Yellow ")}
-->
</style>
</HEAD>
<table>
<tr><td> 1th line </td><td> 1th line </td><td> 1th line </td><td> 1th line </td>< Td> Line 1th </td></tr>
<tr><td> 2nd line </td><td> 2nd line </td><td> 2nd line </td><td> 2nd line </td>< Td> Line 2nd </td></tr>
<tr><td> 3rd line </td><td> 3rd line </td><td> 3rd line </td><td> 3rd line </td>< Td> Line 3rd </td></tr>
<tr><td> 4th Line </td><td> 4th Line </td><td> 4th Line </td><td> 4th line </td>< Td> Line 4th </td></tr>
<tr><td> 5th line </td><td> 5th line </td><td> 5th line </td><td> 5th line </td>< Td> Line 5th </td></tr>
</table>

The above with JS and CSS to judge, the following we hope to have the need for a friend to refer to.