JS学习笔记之给表格隔行换色
作者:互联网
这个小demo主要是涉及到了通过表格id获取其内部元素的方法,同时改变其元素
直接上代码:
html:
1 <table border="1px solid red" cellspacing="0px" id="tbl"> 2 <tbody> 3 <tr> 4 <td> 5 姓名 6 </td> 7 8 <td> 9 <span style="color: red;"> 10 * 11 </span> 12 <input type="text" name="userName" id="userName" onfocus="of('userName')" onblur="ob()" required="required" /> 13 <span id="userNameSpan" style="color: gray; display: none;"> 14 </span> 15 </td> 16 </tr> 17 18 <tr> 19 <td> 20 年龄 21 </td> 22 23 <td> 24 <span style="color: red;"> 25 * 26 </span> 27 <input type="text" name="age" id="age" onfocus="of('age')" onblur="ob()" required="required" /> 28 <span id="ageSpan" style="color: gray; display: none;"> 29 30 </span> 31 </td> 32 </tr> 33 <tr> 34 <td> 35 账号 36 </td> 37 38 <td> 39 <span style="color: red;"> 40 * 41 </span> 42 <input type="text" name="userNumber" id="userNumber" /> 43 <span id="userNumberSpan"> 44 45 </span> 46 </td> 47 </tr> 48 <tr> 49 <td> 50 密码 51 </td> 52 53 <td> 54 <span style="color: red;"> 55 * 56 </span> 57 <input type="password" name="password" id="password" /> 58 <span id="passwordSpan"> 59 60 </span> 61 </td> 62 </tr> 63 <tr> 64 <td> 65 再次输入密码 66 </td> 67 68 <td> 69 <span style="color: red;"> 70 * 71 </span> 72 <input type="password" name="repassword" id="repassword" /> 73 <span id="repasswordSpan"> 74 75 </span> 76 </td> 77 </tr> 78 </tbody> 79 </table> 80 <input type="button" onclick="show();" />
JS代码:
1 <script type="text/javascript"> 2 function show() { 3 var tbEle = document.getElementById("tbl"); 4 var len = tbEle.tBodies[0].rows.length; 5 var i; 6 for (i = 0; i < len; i++) { 7 8 9 if (i % 2 == 0) { 10 tbEle.tBodies[0].rows[i].style.background = "gold"; 11 } else { 12 tbEle.tBodies[0].rows[i].style.background = "pink"; 13 } 14 } 15 } 16 </script>
标签:rows,background,JS,隔行,tbEle,tBodies,换色,var 来源: https://www.cnblogs.com/zhang188660586/p/11172188.html