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