JS---案例：表格隔行變色(鼠標劃過背景色恢復)
案例：表格隔行變色(鼠標劃過背景色恢復)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 500px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 500px; cursor: pointer; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; text-align: center; } th { background-color: #09c; font: bold 16px "微軟雅黑"; color: #fff; } td { font: 14px "微軟雅黑"; } tbody tr { background-color: pink; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th>序號</th> <th>姓名</th> <th>課程</th> <th>成績</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> 1 </td> <td>柳巖</td> <td>語文</td> <td>100</td> </tr> <tr> <td> 2 </td> <td>蒼老師</td> <td>日語</td> <td>100</td> </tr> <tr> <td> 3 </td> <td>鳳姐</td> <td>營銷學</td> <td>100</td> </tr> <tr> <td> 4 </td> <td>芙蓉姐姐</td> <td>數學</td> <td>10</td> </tr> <tr> <td> 5 </td> <td>佐助</td> <td>英語</td> <td>100</td> </tr> <tr> <td> 6 </td> <td>卡卡西</td> <td>體育</td> <td>100</td> </tr> <tr> <td> 7 </td> <td>喬峯</td> <td>體育</td> <td>100</td> </tr> </tbody> </table> </div> <script src="common.js"></script> <script> //獲取因此的行 var trs = my$("j_tb").getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) { trs[i].style.backgroundColor = i % 2 == 0 ? "white" : "skyblue"; //鼠標進入 trs[i].onmouseover = mouseoverHandle; //鼠標離開 trs[i].onmouseout = mouseoutHandle; } //鼠標進入的時候，先把設置後的顏色保存，等到鼠標離開再恢復便可 var lastColor = ""; function mouseoverHandle() {//鼠標進入 lastColor = this.style.backgroundColor; this.style.backgroundColor = "pink"; } function mouseoutHandle() {//鼠標進入 this.style.backgroundColor = lastColor; } </script> </body> </html>
相關文章
- 1. jQuery 點擊表格一行背景變色與恢復
- 2. jquery 全選、反選、獲取值、背景行、隔行變色和鼠標略過變色變色全特效
- 3. Java基礎 awt Button 鼠標放在按鈕上背景顏色改變,鼠標離開背景顏色恢復
- 4. javascript 隔行變色，鼠標滑過變色
- 5. 表格鼠標經過時變色
- 6. JQuery鼠標滑過表格變色
- 7. jsp表格中實現鼠標放到某一行，使這行背景變色，移開時背景色還原。
- 8. 最簡單的背景顏色、背景圖顏色鼠標滑過變換
- 9. JS 隔行變色
- 10. JS：鼠標單擊按鈕實現改變背景顏色
- 更多相關文章...
- • ionic 背景層 - ionic 教程
- • ionic 顏色 - ionic 教程
- • Docker容器實戰(六) - 容器的隔離與限制
- • IntelliJ IDEA代碼格式化設置
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
