HTML表格交替颜色,用CSS3和jQuery实现表格每行交替颜色的效果。
方法一：CSS3 :nth-child() 选择器
1、通过双数行tr:nth-child(even)或者单数行tr:nth-child(odd)来表示即可。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格展示页 - 奇奇博讯</title>
<style type="text/css">
table {
border: 1px solid #333;
text-align: center;
}
th {
background-color: #666;
color: #FFF;
}
tr:nth-child(even) {
background: #CCFFFF;
}
</style>
</head>
<body>
<table width="450" class="color">
<thead>
<tr>
<th>博客名称</th>
<th>作者</th>
<th>网址</th>
</tr>
</thead>
<tbody>
<tr>
<td>奇奇博讯</td>
<td>StarYu</td>
<td>www.77bx.com</td>
</tr>
<tr>
<td>奇奇博讯</td>
<td>StarYu</td>
<td>www.77bx.com</td>
</tr>
<tr>
<td>奇奇博讯</td>
<td>StarYu</td>
<td>www.77bx.com</td>
</tr>
<tr>
<td>奇奇博讯</td>
<td>StarYu</td>
<td>www.77bx.com</td>
</tr>
</tbody>
</table>
</body>
</html>
方法二：jQuery框架
1、通过jQuery也可以实现这种效果。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格展示页 - 奇奇博讯</title>
<style type="text/css">
table {
border: 1px solid #333;
text-align: center;
}
th {
background-color: #666;
color: #FFF;
}
.color1 {
background-color: #CCFFFF;
color: #333;
}
.color2 {
background-color: #666;
color: #FFF;
}
</style>
<script src="https://cdn.staticfile.org/jquery/3.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table tbody tr:odd").addClass("color1");
$("table tbody tr")
.mouseover(function() {
$(this).addClass("color2");
})
.mouseout(function() {
$(this).removeClass("color2");
});
});
</script>
</head>
<body>
<table width="450" class="color">
<thead>
<tr>
<th>博客名称</th>
<th>作者</th>
<th>网址</th>
</tr>
</thead>
<tbody>
<tr>
<td>奇奇博讯</td>
<td>StarYu</td>
<td>www.77bx.com</td>
</tr>
<tr>
<td>奇奇博讯</td>
<td>StarYu</td>
<td>www.77bx.com</td>
</tr>
<tr>
<td>奇奇博讯</td>
<td>StarYu</td>
<td>www.77bx.com</td>
</tr>
<tr>
<td>奇奇博讯</td>
<td>StarYu</td>
<td>www.77bx.com</td>
</tr>
</tbody>
</table>
</body>
</html> 
目前有 0 条评论