js隔行換色+全選/全部選demo
阿新 • • 發佈：2018-06-26
cell blue scale itl val let text 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