使用JQuery完成表格的隔行換色 Js相關技術 獲得所有的行 table.rows[] 修改行的顏色 row.bgColor ="red" row.style.backgroundColor = "black" row.style.background = "red" "bac ...
使用JQuery完成表格的隔行換色
Js相關技術
獲得所有的行
table.rows[]
修改行的顏色
row.bgColor ="red"
row.style.backgroundColor = "black"
row.style.background = "red"
"background-color:red"
"background:red"
需求分析
在我們的實際開發過程中,我們的表格如果所有的行都是一樣的話,很容易看花眼,所以我們需要讓我們的表格隔行換色
技術分析
獲取所有行 table.rows
遍歷所有行
根據行號去修改每一行的背景顏色: bgColor
style.backgroundColor = "red"
步驟分析
- 導入JQ的包
- 文檔載入完成函數: 頁面初始化
- 獲得所有的行 : 元素選擇器
- 根據行號去修改顏色
代碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script>
$(function(){
$("tr:even:gt(0)").css("background-color", "red")
$("tr:odd").css("background-color", "yellow")
});
</script>
</head>
<body >
<table border="1px" width="600px" id="tab">
<tr>
<td>
<input type="checkbox" checked="checked"/>
</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>
