JQuery表格的隔行換色
阿新 • • 發佈：2018-11-24
01JQuery表格的隔行換色.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>01表格的隔行換色</title> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <!-- 1. 匯入JQ的包 2. 文件載入完成函式: 頁面初始化 3. 獲得所有的行 : 元素選擇器 4. 根據行號奇數/偶數去修改顏色 --> <script> $(function(){ //獲得所有的行 : 元素選擇器 $("tbody > tr:even").css("background-color","#CCCCCC"); //修改基數行 $("tbody > tr:odd").css("background-color","#FFF38F"); // $("tbody > tr").css("background-color","#FFF38F"); }); </script> </head> <body> <table border="1px" width="600px" id="tab"> <thead> <tr > <td> <input type="checkbox" /> </td> <td>分類ID</td> <td>分類名稱</td> <td>分類商品</td> <td>分類描述</td> <td>操作</td> </tr> </thead> <tbody> <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> </tbody> </table> </body> </html>
02JQuery表格的隔行換色.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <script > $(function(){ // 後代選擇器 選擇器 選擇器 兒子孫子 // 子元素選擇器 ： 子元素 $("tbody > tr").css("background-color","#FF0000"); }); </script> </head> <body> <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>