JS学习笔记之给表格隔行换色

这个小demo主要是涉及到了通过表格id获取其内部元素的方法，同时改变其元素

直接上代码：

html:

<table border="1px solid red" cellspacing="0px" id="tbl">
            <tbody>
                <tr>
                    <td>
                        姓名
                    </td>

                    <td>
                        <span style="color: red;">
                            *
                        </span>
                        <input type="text" name="userName" id="userName" onfocus="of('userName')" onblur="ob()" required="required" />
                        <span id="userNameSpan" style="color: gray; display: none;">
                        </span>
                    </td>
                </tr>

                <tr>
                    <td>
                        年龄
                    </td>

                    <td>
                        <span style="color: red;">
                            *
                        </span>
                        <input type="text" name="age" id="age" onfocus="of('age')" onblur="ob()" required="required" />
                        <span id="ageSpan" style="color: gray; display: none;">

                        </span>
                    </td>
                </tr>
                <tr>
                    <td>
                        账号
                    </td>

                    <td>
                        <span style="color: red;">
                            *
                        </span>
                        <input type="text" name="userNumber" id="userNumber" />
                        <span id="userNumberSpan">

                        </span>
                    </td>
                </tr>
                <tr>
                    <td>
                        密码
                    </td>

                    <td>
                        <span style="color: red;">
                            *
                        </span>
                        <input type="password" name="password" id="password" />
                        <span id="passwordSpan">

                        </span>
                    </td>
                </tr>
                <tr>
                    <td>
                        再次输入密码
                    </td>

                    <td>
                        <span style="color: red;">
                            *
                        </span>
                        <input type="password" name="repassword" id="repassword" />
                        <span id="repasswordSpan">

                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" onclick="show();" />

JS代码：

<script type="text/javascript">
            function show() {
                var tbEle = document.getElementById("tbl");
                var len = tbEle.tBodies[0].rows.length;
                var i;
                for (i = 0; i < len; i++) {


                    if (i % 2 == 0) {
                        tbEle.tBodies[0].rows[i].style.background = "gold";
                    } else {
                        tbEle.tBodies[0].rows[i].style.background = "pink";
                    }
                }
            }
        </script>