<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
*{
margin: 1px auto;
font-size: 18px;
}
table{
border: 1px solid #136eb2;
}
table tr th,td{
border: 1px solid #000000;
width: 100px;
text-align: left;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>编号</th><th>姓名</th><th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td> <td>张三</td> <td>22</td>
</tr>
<tr>
<td>2</td> <td>李四</td> <td>20</td>
</tr>
<tr>
<td>3</td> <td>王五</td> <td>22</td>
</tr>
<tr>
<td>4</td> <td>赵六</td> <td>20</td>
</tr>
<tr>
<td>5</td> <td>孙七</td> <td>22</td>
</tr>
<tr>
<td>6</td> <td>刘八</td> <td>20</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
$(function () {
$("tbody tr:even").css("backgroundColor","#FFF38F");
$("tbody tr:odd").css("backgroundColor","#FFFFEE");
});
</script>
</html>使用JQ完成表格的隔行换色
猜你喜欢
转载自blog.csdn.net/gadxiong/article/details/80514001
今日推荐
周排行