JQuery實現表格奇偶數行變色
阿新 • • 發佈：2019-01-02
HTML程式碼部分start
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>表格奇偶數行變色</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src=js/jquery.min.js></script>
<script src=js/index.js></script>
</head>
<body>
<table id=myTab>
<tr>
<td>姓名</td>
<td>工資</td>
<td>入職時間</td>
<td>操作</td>
</tr>
<tr>
<td>Tom</td>
<td>$3500</td>
<td>2010-12-25</td>
<td>刪除</td>
</tr>
<tr>
<td>Mary</td>
<td>$3400</td>
<td>2010-12-01</td>
<td>刪除</td>
</tr>
<tr>
<td>King</td>
<td>$5900</td>
<td>2009-8-17</td>
<td>刪除</td>
</tr>
<tr>
<td>Scott</td>
<td>$3800</td>
<td>2012-11-17</td>
<td>刪除</td>
</tr>
<tr>
<td>Smith</td>
<td>$3100</td>
<td>2014-01-27</td>
<td>刪除</td>
</tr>
<tr>
<td>Allen</td>
<td>$3700</td>
<td>2011-12-05</td>
<td>刪除</td>
</tr>
</table>
</body>
</html>
HTML程式碼end
JS程式碼部分
$(function() {
$("tr:odd").css("background","#FA9595");//單行
$("tr:even").css("background","#DA7595");//雙行
})
記得建立一個js而不是寫在HTML裡