为了让表格中的行更加突出,条理更加清晰,我们可以对其中的奇数或者偶数行添加背景色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.color
{
background-color:#1abc9c;
}
</style>
</head>
<body>
<table border="1">
<caption class="text-center">信息统计表</caption>
<thead>
<tr >
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
<th>QQ</th>
</tr>
</thead>
<tbody>
<tr class="error">
<td>1</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr> <tr class="warning">
<td>2</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr> <tr class="info"> <td>3</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr> <tr class="success"> <td>4</td>
<td>qian</td>
<td>shou</td>
<td>11111111111</td>
<td>111111111</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$("table tbody tr:even").addClass("color");
</script>
</body>
</html>
核心代码:
$("table tbody tr:even").addClass("color");
效果图: