js開發 表單全選、取消及滑鼠懸停效果 綜合案例
阿新 • • 發佈：2022-01-18
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { border-collapse: collapse;/*屬性設定表格的邊框是否被摺疊成一個單一的邊框或隔開： 加上它跟真正的表格無異 去掉，則是標準顯示*/ width:100%; /*寬度佔瀏覽器的100%*/ } table th{ background-color: blue; } table, td, th { padding: 10; /*如需控制邊框和表格內容之間的間距，應使用td和th元素的填充屬性*/ border: 1px solid black;/*表示1畫素的黑色黑線邊框*/ text-align:right; /*針對文字，水平方向的右靠齊，可以改為left左，center中間*/ height:50px; /*行高*/ vertical-align:bottom; /*針對文字，預設顯示垂直方向的居中，可以更改為top頂部，bottom底部*/ /* background-color:green; 背景顏色 */ color:#000; /*文字顏色*/ text-align: center; line-height: 50px; } .bg{ background-color: pink; } </style> </head> <body> <table> <thead> <tr> <th><input type="checkbox" class="allcheck"></th> <th>程式碼</th> <th>名稱</th> <th>最新公佈淨值</th> <th>累計淨值</th> <th>前單元淨值</th> <th>淨值增長率</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" ></td> <td>003527</td> <td>3個月定期</td> <td>1.075</td> <td>1.079</td> <td>1.0722</td> <td>+0.047%</td> </tr> <tr> <td><input type="checkbox"></td> <td>003527</td> <td>3個月定期</td> <td>1.075</td> <td>1.079</td> <td>1.0722</td> <td>+0.047%</td> </tr> <tr> <td><input type="checkbox" ></td> <td>003527</td> <td>3個月定期</td> <td>1.075</td> <td>1.079</td> <td>1.0722</td> <td>+0.047%</td> </tr> <tr> <td><input type="checkbox"></td> <td>003527</td> <td>3個月定期</td> <td>1.075</td> <td>1.079</td> <td>1.0722</td> <td>+0.047%</td> </tr> <tr> <td><input type="checkbox"></td> <td>003527</td> <td>3個月定期</td> <td>1.075</td> <td>1.079</td> <td>1.0722</td> <td>+0.047%</td> </tr> </tbody> </table> <script> // 獲取元素 var allcheck = document.querySelector('.allcheck'); var trs= document.getElementsByTagName('tr'); var trinput = document.querySelector('tbody').querySelectorAll('input'); for(var i=0;i<trs.length;i++){ trs[i].onmouseover = function(){ this.className='bg'; } trs[i].onmouseout = function(){ this.className=''; } } // 單擊全選框，全選單選框 // 思路被選中了以後返回布林值true console.log(this.checked); allcheck.onclick = function(){ for(var j=0;j<trinput.length;j++){ trinput[j].checked=this.checked; } } // 全選單選框，全選框自動勾選 for(var k=0;k<trinput.length;k++ ){ trinput[k].onclick = function(){ var flg = true; for(var i=0;i<trinput.length;i++){ //trinput[i].checked 返回的是狀態，true是被選中的，反之false if(!trinput[i].checked){ //if當true的會執行，取反；就是當時false狀態，賦值給flg flg=false; } } allcheck.checked=flg; } } </script> </body> </html>