JQuery实现表格奇偶数行变色

来源:互联网 发布:百分百qq综合采集软件 编辑:程序博客网 时间:2024/06/06 03:26

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里

原创粉丝点击