js基础知识示例2----表格隔行变色


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function(){ //页面所有元素加载完毕
    var item  =  document.getElementById("tb");         //获取id为tb的元素(table)
    var tbody =  item.getElementsByTagName("tbody")[0]; //获取表格的第一个tbody元素
    var trs =   tbody.getElementsByTagName("tr");           //获取tbody元素下的所有tr元素
    for(var i=0;i < trs.length;i++){//循环tr元素
        if(i%2==0){        //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
            trs[i].style.backgroundColor = "#000000"; // 改变 符合条件的tr元素 的背景色.
        }
    }
}
script>
head>
<body>
<table id="tb">
    <tbody>
        <tr><td>第一行td><td>第一行td>tr>
        <tr><td>第二行td><td>第二行td>tr>
        <tr><td>第三行td><td>第三行td>tr>
        <tr><td>第四行td><td>第四行td>tr>
        <tr><td>第五行td><td>第五行td>tr>
        <tr><td>第六行td><td>第六行td>tr>
    tbody>
table>
body>
html>

你可能感兴趣的:(程序人生)