JavaScript表格的隔行換色
阿新 • • 發佈：2018-11-12
1. 確定事件: 文件載入完成 onload
2. 事件要觸發函式: init()
3. 函式:操作頁面的元素
要操作表格中每一行
動態的修改行的背景顏色
01表格隔行換色.html [標題行不換色]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>01表格隔行換色</title> <script> function init(){ //得到表格 var tab = document.getElementById("tab"); //得到表格中每一行 var rows = tab.rows; //遍歷所有的行,然後根據奇數 偶數,使行得到不同顏色 //標題行不換色 for(var i=1; i < rows.length; i++){ var row = rows[i]; //得到其中的某一行 if(i%2==0){ row.bgColor = "yellow"; }else{ row.bgColor = "red"; } } } </script> </head> <body onload="init()"> <table border="1px" width="600px" id="tab"> <tr> <td> <input type="checkbox" /> </td> <td>分類ID</td> <td>分類名稱</td> <td>分類商品</td> <td>分類描述</td> <td>操作</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>1</td> <td>手機數碼</td> <td>手機</td> <td>手機特賣</td> <td> <a href="#">修改</a> <a href="#">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>2</td> <td>鞋靴箱包</td> <td>箱包</td> <td>日常家用</td> <td> <a href="#">修改</a> <a href="#">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>3</td> <td>美酒美食</td> <td>美酒</td> <td>葡萄酒</td> <td> <a href="#">修改</a> <a href="#">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>4</td> <td>衣服特賣</td> <td>衣服</td> <td>什麼樣的衣服都有</td> <td> <a href="#">修改</a> <a href="#">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>5</td> <td>美妝賣場</td> <td>美妝</td> <td>各式各樣的美妝產品</td> <td> <a href="#">修改</a> <a href="#">刪除</a> </td> </tr> </table> </body> </html>
02表格隔行換色.html [標題行換色]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>02表格隔行換色</title> <script> function init(){ //得到表格 var tab = document.getElementById("tab"); //得到表格中每一行 var rows = tab.rows; //遍歷所有的行,然後根據奇數 偶數,使行得到不同顏色 //標題行換色 for(var i=0; i < rows.length; i++){ var row = rows[i]; //得到其中的某一行 if(i%2==0){ row.bgColor = "yellow"; }else{ row.bgColor = "red"; } } } </script> </head> <body onload="init()"> <table border="1px" width="600px" id="tab"> <tr> <td> <input type="checkbox" /> </td> <td>分類ID</td> <td>分類名稱</td> <td>分類商品</td> <td>分類描述</td> <td>操作</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>1</td> <td>手機數碼</td> <td>手機</td> <td>手機特賣</td> <td> <a href="#">修改</a> <a href="#">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>2</td> <td>鞋靴箱包</td> <td>箱包</td> <td>日常家用</td> <td> <a href="#">修改</a> <a href="#">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>3</td> <td>美酒美食</td> <td>美酒</td> <td>葡萄酒</td> <td> <a href="#">修改</a> <a href="#">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>4</td> <td>衣服特賣</td> <td>衣服</td> <td>什麼樣的衣服都有</td> <td> <a href="#">修改</a> <a href="#">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>5</td> <td>美妝賣場</td> <td>美妝</td> <td>各式各樣的美妝產品</td> <td> <a href="#">修改</a> <a href="#">刪除</a> </td> </tr> </table> </body> </html>