会python真的可以为所欲为0(回)
359天前
这里还有人吗1(回)
544天前这里还有人吗0(回)
544天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
769天前到处都是羊，不想上班0(回)
849天前
鸽子
0(回)
853天前<!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> |
