Javascript之表格隔行变色

其实原理很简单，取到表格ID，获取表格内的<tbody>元素，然后在获取<tbody>元素下的所有<tr>元素。然后循环输出获取的<tr>元素。

对<tr>元素的索引值除2取余，为0者设置背景色。

HTML代码：

 <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>

Javascript代码：

 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) {                               //取余
                    trs[i].style.backgroundColor = "#888";      //改变符合条件tr元素的背景色
                }
            }