【javaweb】JQ實現表格的隔行換色
阿新 • • 發佈：2018-12-10
需求分析：商品分類資訊太多，每一行都是同一個顏色會讓人看得眼花繚亂，為了提高使用者體驗，我們需要對錶格進行隔行換色。
目標樣例如下：
步驟分析：1. 匯入JQ的包
2. 文件載入完成函式: 頁面初始化
3. 獲得所有的行 : 元素選擇器
4. 根據行號奇數/偶數去修改顏色
原始碼如下：
<!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: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>