[javascript]代码库
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表格隔行变色和高亮</title>
<style type="text/css">
table{
border: 1px red solid;
width: 500px;
margin: auto;
}
td{
border:1px blue solid;
margin: 10px;
padding: 10px;
text-align: center;
}
th{
background-color: maroon;
}
.one{
background-color: blue;
}
.two{
background-color: green;
}
.over{
background-color: aqua;
}
</style>
<script type="text/javascript">
/*
表格隔行变色。
思路：
动态的获取table下面的所有行，然后动态的给这些行设置class属性
*/
//在整个页面加载完成之后要执行函数
window.onload = function(){
//根据标签名获取table标签,获取到的是页面上所有的table标签集合
var table = document.getElementsByTagName("table")[0];
//获取table下的所有行
var rows = table.rows;
//遍历每行，动态的给每行添加class属性
for(var i=1;i<rows.length;i++){
//判断当前获取到的行是奇数行还是偶数行
if( i%2==0 ){
//取出当前这个行对象
rows[i].className = "one";
}else{
rows[i].className = "two";
}
//在鼠标进入某一行之前需要把这行的背景颜色记住
var classname;
//动态的给表格每行添加事件
rows[i].onmouseover = function(){
classname = this.className;
this.className = "over";
}
rows[i].onmouseout = function(){
this.className = classname;
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>高杰</td>
<td>18</td>
<td>闵行</td>
</tr>
<tr >
<td>李刚</td>
<td>16</td>
<td>上海</td>
</tr>
<tr>
<td>赵士龙</td>
<td>22</td>
<td>东莞</td>
</tr>
<tr>
<td>鲁宾</td>
<td>29</td>
<td>北京</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
</table>
</body>
</html>
会python真的可以为所欲为0(回)
219天前
这里还有人吗1(回)
404天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
629天前
鸽子
0(回)
713天前