斑马线表格
HTML代码
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<meta charset="utf-8">
<title>斑马线表格</title>
<style type="text/css">
*{
margin: 0 auto; //表格居中
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>专业</th>
</tr>
<tr>
<td>李文</td>
<td>男</td>
<td>20</td>
<td>大数据</td>
</tr>
<tr>
<td>王楠</td>
<td>女</td>
<td>19</td>
<td>软件技术</td>
</tr>
<tr>
<td>赵倩</td>
<td>女</td>
<td>18</td>
<td>人工智能</td>
</tr>
<tr>
<td>叮咛</td>
<td>女</td>
<td>21</td>
<td>动漫制作</td>
</tr>
<tr>
<td>睢阳</td>
<td>女</td>
<td>22</td>
<td>数据库应用</td>
</tr>
<tr>
<td>楠喃</td>
<td>女</td>
<td>21</td>
<td>前端网站</td>
</tr>
</table>
<script type="text/javascript">
$('table').css({'width':'800','height':'200'});
$('tr').css('textAlign','center');
//如果在文档没有完全加载之前就运行函数,操作可能失败。
//在这些代码外面加上一层 $('document').ready(function(){})
//可以防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。
//DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口。
$("tr:even").hover(function(){
$("tr:even").css("background-color","#7a7281");//莫兰迪色系
},function(){
$("tr:even").css("background-color","#f0ebe5");
});
$("tr:odd").hover(function(){
$("tr:odd").css("background-color","#656565");
},function(){
$("tr:odd").css("background-color","#fdf9ee");
});
$('tr:first').css('background','#6b5152');
//后部的操作函数会覆盖之前的
</script>
</body>
</html>