js實現表格變色
阿新 • • 發佈：2022-03-24
今天學習DOM了，使用dom實現表格換行變色和滑鼠懸停變色
DOM對元素屬性的操作
1.getAttribute
獲取元素屬性值
input.getAttribute('type')
1
2.setAttribute
給元素新增屬性值（第一個引數是屬性名，第二個引數是屬性的值）必須兩個引數
input.setAttribute("yes", "ok") //yes=ok
1
新增屬性（一個值）
input.attributes.setNamedItem(disabled)
1
3.createAttribute
建立屬性（用變數接收）
var NewAttribute = document.createAttribute('good')
input.setAttribute('good', 'ok')
1
2
4.removeAttribute
刪除屬性
input.getAttributeNode("type")
換行變色：
第一步 使用document.getElementsByTagName獲取行數陣列
第二步 便利行數陣列，用取餘的方式判斷奇偶行
第三步 用bgColor給表格行一個顏色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"content="width=, initial-scale=1.0"> <title>Document</title> </head> <body> <table border="1" > <tr style="background-color: #999999;"> <th> <input type="checkbox"> </th> <th>商品序號</th> <th>商品名稱</th> <th>商品價格</th> <th>操作</th> </tr> <tr> <td> <input type="checkbox"> </td> <td>01</td> <td>筆記本</td> <td>5000</td> <td>修改 刪除</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>01</td> <td>筆記本</td> <td>5000</td> <td>修改 刪除</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>01</td> <td>筆記本</td> <td>5000</td> <td>修改 刪除</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>01</td> <td>筆記本</td> <td>5000</td> <td>修改 刪除</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>01</td> <td>筆記本</td> <td>5000</td> <td>修改 刪除</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>01</td> <td>筆記本</td> <td>5000</td> <td>修改 刪除</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>01</td> <td>筆記本</td> <td>5000</td> <td>修改 刪除</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>01</td> <td>筆記本</td> <td>5000</td> <td>修改 刪除</td> </tr> </table> <script> var trs = document.getElementsByTagName("tr"); var color ; for(var i = 1;i<trs.length;i++){ if(i%2==0){ trs[i].bgColor="red"; } else{ trs[i].bgColor="white"; } //滑鼠懸浮變色 trs[i].onmouseover = function(){ color = this.bgColor; this.bgColor="green"; } trs[i].onmouseout = function(){ this.bgColor=color; } } </script> </body> </html>