Dom编程（表格的行与行之间以颜色间隔、鼠标经过行以高亮显示）

最新推荐文章于 2022-09-09 11:51:39 发布

Lola的笔记

最新推荐文章于 2022-09-09 11:51:39 发布

阅读量439

点赞数

本文链接：https://blog.csdn.net/melinda23096/article/details/38471817

版权

html+css+javascript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

表格的行与行之间以颜色间隔、鼠标经过行高亮显示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>行以颜色间隔 & 高亮经过行</title>
<style type="text/css">
table{
	width:360px;
	border:thin solid #33C;
}
tr{
	height:30px;
}
td{
	border:thin solid #30C;
	text-align:center;
	line-height:30px;
}
th{
	background-color:#09C;
	border:thin solid #30C;
	line-height:30px;
}

.two{
	background-color:#CFF;
}

.over{
	background-color:#F9C;
}
</style>

<script type="text/javascript">
var name;
function colorfulRows(){
	var tableNode = document.getElementsByTagName("table")[0];
	var rows = tableNode.rows;
	
	for(var x=1; x<rows.length; x++){
		if(x%2==0){
			rows[x].className = "two";	
		}
		
		//因为这里是在描述两个事件，所以节点的引用必须是this。
		rows[x].onmouseover = function(){
			name = this.className;
			this.className = "over";
		}
		rows[x].onmouseout = function(){
			this.className = name;
		}
	}
}

window.onload = colorfulRows;
</script>
</head>

<body>
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>所在地</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>38</td>
        <td>上海</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>4</td>
        <td>广东</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>46</td>
        <td>桂林</td>
    </tr>
    <tr>
        <td>周七</td>
        <td>27</td>
        <td>陕西</td>
    </tr>
    <tr>
        <td>赵六</td>
        <td>56</td>
        <td>武汉</td>
    </tr>
    <tr>
        <td>康八</td>
        <td>31</td>
        <td>四川</td>
    </tr>
</table>

</body>
</html>