本文介绍了一个使用DHTML实现的表格隔行变色效果，并通过JavaScript为表格添加了鼠标悬停高亮的功能。该示例展示了如何利用HTML、CSS及简单的JavaScript代码来改善用户体验。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DHTML技术综合演示---示例:表格行间隔显示</title>
<style type="text/css">
table {
border: #8080ff solid 1px;
width: 500px;
border-collapse: collapse;
}
table th {
border: #ff0000 solid 1px;
padding: 5px;
background-color: rgb(200, 200, 200);
}
table td {
border: #ff0000 solid 1px;
padding: 5px;
}
.one{
background-color:#ffff80;
}
.two{
background-color:#0080ff;
}
.over{
background-color:#80ffff;
}
</style>
</head>
<body>
<script type="text/javascript">
var bgColor;
onload = function(){
var oTable = document.getElementById("tab1");
for(var i=1;i<oTable.rows.length;i++){//第一栏不用修改
var oTr = oTable.rows[i];
if(i%2==1){
oTr.className = "one";
}else{
oTr.className="two";
};
//给当前行注册事件
oTr.onmouseover =function(){//此处要用this，
bgColor = this.className;
this.className = "over";
};
oTr.onmouseout =function(){
this.className=bgColor;
};
}
};
</script>
<table id="tab1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>湖南</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>湖南</td>
</tr>
<tr>
<td>Jack</td>
<td>19</td>
<td>北京</td>
</tr>
<tr>
<td>Alice</td>
<td>23</td>
<td>New York</td>
</tr>
<tr>
<td>赵子龙</td>
<td>21</td>
<td>常山</td>
</tr>
<tr>
<td>刘备</td>
<td>24</td>
<td>上海</td>
</tr>
<tr>
<td>张飞</td>
<td>24</td>
<td>上海</td>
</tr>
<tr>
<td>关羽</td>
<td>24</td>
<td>上海</td>
</tr>
</table>
</body>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DHTML技术综合演示---示例:表格行间隔显示</title>
<style type="text/css">
table {
border: #8080ff solid 1px;
width: 500px;
border-collapse: collapse;
}
table th {
border: #ff0000 solid 1px;
padding: 5px;
background-color: rgb(200, 200, 200);
}
table td {
border: #ff0000 solid 1px;
padding: 5px;
}
.one{
background-color:#ffff80;
}
.two{
background-color:#0080ff;
}
.over{
background-color:#80ffff;
}
</style>
</head>
<body>
<script type="text/javascript">
var bgColor;
onload = function(){
var oTable = document.getElementById("tab1");
for(var i=1;i<oTable.rows.length;i++){//第一栏不用修改
var oTr = oTable.rows[i];
if(i%2==1){
oTr.className = "one";
}else{
oTr.className="two";
};
//给当前行注册事件
oTr.onmouseover =function(){//此处要用this，
bgColor = this.className;
this.className = "over";
};
oTr.onmouseout =function(){
this.className=bgColor;
};
}
};
</script>
<table id="tab1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>湖南</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>湖南</td>
</tr>
<tr>
<td>Jack</td>
<td>19</td>
<td>北京</td>
</tr>
<tr>
<td>Alice</td>
<td>23</td>
<td>New York</td>
</tr>
<tr>
<td>赵子龙</td>
<td>21</td>
<td>常山</td>
</tr>
<tr>
<td>刘备</td>
<td>24</td>
<td>上海</td>
</tr>
<tr>
<td>张飞</td>
<td>24</td>
<td>上海</td>
</tr>
<tr>
<td>关羽</td>
<td>24</td>
<td>上海</td>
</tr>
</table>
</body>
</html>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
