为了让表格中的行更加突出，条理更加清晰，我们可以对其中的奇数或者偶数行添加背景色
<!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");效果图：
本文发布于:2024-01-28 08:26:57，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17064016216103.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
