您的位置：首页 > Web前端 > JavaScript

JavaScript DOM编程艺术—表格的奇数行在点击时实现斑马线效果

2015-11-18 22:36 716 查看

表格的奇数行在点击时实现斑马线效果

test.html文件

<!document html>
<html>
<head>
</head>
<body>
<table border="1" width="400" height="200">
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
<link rel="stylesheet" href="css.css" />
<script type="text/javascript" src="addLoadEvent.js"></script>
<script type="text/javascript" src="addClass.js"></script>
</body>
</html>

css.css文件

.odd{
background-color:red;
}
.white{
background-color:white;
}

addLoadEvent.js文件
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}
else{
window.onload = function(){
oldonload();
func();
}
}
}

addClass.js

function addClass(element,value){
if(!element.className){
element.className = value;
}
else{
element.className += " ";
element.className += value;
}
}
function show(){
var trs = document.getElementsByTagName("tr");
var odd = false;
for(var i=0; i<trs.length; i++){
if(odd == false){
trs[i].onmouseover = function(){
addClass(this,"odd");
}
trs[i].onmouseout = function(){
addClass(this,"white");
}
odd = true;
}
else{
odd = false;
}
}
}

DOM可以实现CSS动作层的效果，但要注意合理利用。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript dom

相关文章推荐

新的分享

章节导航