js隔行换色+全选/全部选demo
Posted breezezqf
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js隔行换色+全选/全部选demo相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <script type="text/javascript"> 8 onload=function(){ 9 // 获取所有的tr,返回数组 10 var alltr=document.getElementsByTagName("tr"); 11 for (var i = 0; i < alltr.length; i++) { 12 if(i%2==0){ 13 alltr[i].style.backgroundColor="aqua"; 14 }else{ 15 alltr[i].style.backgroundColor="blueviolet"; 16 } 17 } 18 } 19 //全选全不选 20 function checkAll(){ 21 //1.获取编号前面的复选框 22 var checkAllEle = document.getElementById("checkAll"); 23 //2.对编号前面复选框的状态进行判断 24 if(checkAllEle.checked==true){ 25 //3.获取下面所有的复选框 26 var checkboxtest = document.getElementsByName("checkboxtest"); 27 //4.对获取的所有复选框进行遍历 28 for(var i=0;i<checkboxtest.length;i++){ 29 //5.拿到每一个复选框，并将其状态置为选中 30 checkboxtest[i].checked=true; 31 } 32 }else{ 33 //6.获取下面所有的复选框 34 var checkboxtest = document.getElementsByName("checkboxtest"); 35 //7.对获取的所有复选框进行遍历 36 for(var i=0;i<checkboxtest.length;i++){ 37 //8.拿到每一个复选框，并将其状态置为未选中 38 checkboxtest[i].checked=false; 39 } 40 } 41 } 42 43 44 </script> 45 </head> 46 <body> 47 <div id=""> 48 <table border="1" cellspacing="" cellpadding="" width="400px"> 49 <tr> 50 <td>测试数据</td> 51 <td>测试数据</td> 52 <td>测试数据</td> 53 <td>测试数据</td> 54 </tr> 55 <tr> 56 <td>测试数据</td> 57 <td>测试数据</td> 58 <td>测试数据</td> 59 <td>测试数据</td> 60 </tr> 61 <tr> 62 <td>测试数据</td> 63 <td>测试数据</td> 64 <td>测试数据</td> 65 <td>测试数据</td> 66 </tr> 67 <tr> 68 <td>测试数据</td> 69 <td>测试数据</td> 70 <td>测试数据</td> 71 <td>测试数据</td> 72 </tr> 73 </table> 74 </div> 75 <br/><br/> 76 <div id=""> 77 <input type="checkbox" name="" id="checkAll" value="" onclick="checkAll()"/>全选/全不选<br/> 78 <input type="checkbox" name="checkboxtest" id="" value="" />测试数据<br/> 79 <input type="checkbox" name="checkboxtest" id="" value="" />测试数据<br/> 80 <input type="checkbox" name="checkboxtest" id="" value="" />测试数据<br/> 81 <input type="checkbox" name="checkboxtest" id="" value="" />测试数据<br/> 82 <input type="checkbox" name="checkboxtest" id="" value="" />测试数据<br/> 83 <input type="checkbox" name="checkboxtest" id="" value="" />测试数据<br/> 84 </div> 85 </body> 86 </html>
以上是关于js隔行换色+全选/全部选demo的主要内容，如果未能解决你的问题，请参考以下文章
前端5js：Dom：全选全不选，省市级联，隔行/触摸换色，表单校验