文章最后更新时间：2023年06月29日已超过405天没有更新。
在做内容网页时，避免不了要用到表格来展示数据及内容，正所谓好马配好鞍，一个与网站风格匹配的表格可以提升不少用户体验。本篇文章将介绍制作一款自适应自动隔行颜色+鼠标移到行变色的精美HTML表格。效果如下图所示：
先来制作一个HTML标准的表格，代码如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML标准表格</title> </head> <body> <table> <thead> <tr><!-- 表头用th标签 --> <th>姓名</th> <th>性别</th> <th>部门</th> <th>入职时间</th> <th>薪资</th> </tr> </thead> <tbody> <tr> <td>王小红</td> <td>女</td> <td>行政部</td> <td>2020-05-01</td> <td>5500</td> </tr> <tr> <td>李明亮</td> <td>男</td> <td>技术部</td> <td>2019-02-16</td> <td>12000</td> </tr> <tr> <td>张三山</td> <td>男</td> <td>业务部</td> <td>2017-08-23</td> <td>9000</td> </tr> <tr> <td>陈研秀</td> <td>女</td> <td>财务部</td> <td>2017-09-14</td> <td>6500</td> </tr> <tr> <td>何东东</td> <td>男</td> <td>人事部</td> <td>2019-02-21</td> <td>6800</td> </tr> </tbody> </table> </body> </html>
表格制作完以后，加入CSS样式进行美化及隔行颜色效果，CSS样式代码如下：
table{width:100%; border-collapse:collapse;}
table,tr,td,th{padding:0; margin:0; line-height:30px;}
table thead tr th {color:#FFF; font-size:16px; font-weight:400; background-color:#888; border-left:1px solid #888; border-right:1px solid #ddd;}
table tbody td{text-align:center; border:1px solid #ddd;}
table tbody tr:nth-child(2n) {background-color:#f8f8f8;}/*隔行颜色*/1、CSS鼠标事件
加入CSS鼠标事件，让鼠标移到指定行时背景变色，这里的鼠标事件通过定义在<tbody>标签区域，即表格内容区域(表头区域不受影响)，鼠标事件CSS代码：
table tbody tr:hover{background-color:#fcfced;}完成后，把所有代码组合在一起，即可得到完整的表格效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格隔行颜色+鼠标移动至行变色</title>
<style>
table{width:100%; border-collapse:collapse;}
table,tr,td,th{padding:0; margin:0; line-height:30px;}
table thead tr th {color:#FFF; font-size:16px; font-weight:400; background-color:#888; border-left:1px solid #888; border-right:1px solid #ddd;}
table tbody td{text-align:center; border:1px solid #ddd;}
table tbody tr:nth-child(2n) {background-color:#f8f8f8;}/*隔行颜色*/
table tbody tr:hover{background-color:#fcfced;}/*鼠标移动至行变色*/
</style>
</head>
<body>
<table>
<thead>
<tr><!-- 表头用th标签 -->
<th>姓名</th>
<th>性别</th>
<th>部门</th>
<th>入职时间</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>王小红</td>
<td>女</td>
<td>行政部</td>
<td>2020-05-01</td>
<td>5500</td>
</tr>
<tr>
<td>李明亮</td>
<td>男</td>
<td>技术部</td>
<td>2019-02-16</td>
<td>12000</td>
</tr>
<tr>
<td>张三山</td>
<td>男</td>
<td>业务部</td>
<td>2017-08-23</td>
<td>9000</td>
</tr>
<tr>
<td>陈研秀</td>
<td>女</td>
<td>财务部</td>
<td>2017-09-14</td>
<td>6500</td>
</tr>
<tr>
<td>何东东</td>
<td>男</td>
<td>人事部</td>
<td>2019-02-21</td>
<td>6800</td>
</tr>
</tbody>
</table>
</body>
</html>2、JS鼠标事件
除了CSS鼠标事件可以实现鼠标移到行变色外，还可以通过JS的鼠标事件来进行控制，为了兼容性，建议用JS来控制更佳。
JS鼠标事件使用方法：
把表格内容<tbody>标签内增加一个定位id，修改为<tbody id="cuinew">
再在<head>标签内加入以下js代码：
<script type="text/javascript" >
window.onload = function(){
//鼠标移到表格的行背景色改变
var rows = $('cuinew').rows;//获取行ID
for(var i in rows){
rows[i].onmouseover = function(){
this.style.backgroundColor = '#fcfced';//鼠标移到行样式
};
rows[i].onmouseout = function(){
this.style.backgroundColor = '';//鼠标离开行样式
};
}
}
function $(id){
return document.getElementById(id);
}
</script>至此大功造成，完整的表格HTML代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格鼠标事件</title>
<style>
table{width:100%;border-collapse:collapse;}
table,tr,td,th{padding:0;margin:0;line-height:30px;}
table thead tr th {color:#FFF;font-size:16px;font-weight:400;background-color:#888;border-left:1px solid #888;border-right:1px solid #ddd;}
table tbody td{text-align:center;border:1px solid #ddd;}
table tbody tr:nth-child(2n) {background-color:#f8f8f8;/*隔行颜色*/}
</style>
<script type="text/javascript" >
window.onload = function(){
//鼠标移到表格的行背景色改变
var rows = $('cuinew').rows;//获取行ID
for(var i in rows){
rows[i].onmouseover = function(){
this.style.backgroundColor = '#fcfced';//鼠标移到行样式
};
rows[i].onmouseout = function(){
this.style.backgroundColor = '';//鼠标离开行样式
};
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<table>
<thead>
<tr><!-- 表头用th标签 -->
<th>姓名</th>
<th>性别</th>
<th>部门</th>
<th>入职时间</th>
<th>薪资</th>
</tr>
</thead>
<tbody id="cuinew"><!-- 内容表格插入获取的Id -->
<tr>
<td>王小红</td>
<td>女</td>
<td>行政部</td>
<td>2020-05-01</td>
<td>5500</td>
</tr>
<tr>
<td>李明亮</td>
<td>男</td>
<td>技术部</td>
<td>2019-02-16</td>
<td>12000</td>
</tr>
<tr>
<td>张三山</td>
<td>男</td>
<td>业务部</td>
<td>2017-08-23</td>
<td>9000</td>
</tr>
<tr>
<td>陈研秀</td>
<td>女</td>
<td>财务部</td>
<td>2017-09-14</td>
<td>6500</td>
</tr>
<tr>
<td>何东东</td>
<td>男</td>
<td>人事部</td>
<td>2019-02-21</td>
<td>6800</td>
</tr>
</tbody>
</table>
</body>
</html>
文章版权声明：除非注明，否则均为崔牛网原创文章，转载或复制请以超链接形式并注明出处。
发表评论