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元素的背景色

                }

            }