javascript 实现隔行变色

<script type="text/javascript">
window.onload = function()//javascript 实现隔行变色
{

var myCaption = document.getElementsByTagName('caption')[0];
myCaption.style.backgroundColor = "red";
var myTable = document.getElementById("myTable");
myTable.style.border = "solid"
//alert(typeof myTable);
var myTrs = myTable.getElementsByTagName('tr');
//alert(myTrs.length);
for(var i = 0; i<myTrs.length;i++)
{
if(i%2 == 0)
{
myTrs[i].style.backgroundColor ="pink";
}else
{
myTrs[i].style.backgroundColor ="white";
}
}

}

</script>
</head>
<body>
<table id="myTable" align="center" style="width:80%">
<caption>javascript 实现隔行变色</caption>
<tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
<tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
<tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
<tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
<tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
<tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
<tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
<tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
<tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
<tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
<tr><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td><td>aaaa</td></tr>
</table>
</body>
</html>

你可能感兴趣的:(JavaScript)