王威威

王威威的博客

他的个人主页他的博客

JavaScript实现单击行变颜色

王威威 2009年11月20日星期五 22:49 | 1523次浏览 | 0条评论

JavaScript实现的单击行变色效果，由于写JavaScript不是很多，算法上有待优化，有更好的实现，大家可以交流一下！

<!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><!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>JavaScript实现单击行变颜色</title>
<style>
table{
   border-bottom:solid 1px;
   border-top:solid 1px;
   border-left:solid 1px;
   border-right:solid 1px;
}
table td{
   border-bottom:solid 1px;
   border-top:solid 1px;
   border-left:solid 1px;
   border-right:solid 1px;
}
</style>

<script language="javascript">
window.onload = function(){
var table = document.getElementById("t1"); //得到table元素

   var tbodys = table.childNodes;//一般IE会自动加一个tbody（可以手动加），关于tbody不在赘述，自己到网上查吧！
   for(var i = 0; i < tbodys.length ; i++){//遍历table下的tbody元素
      var trs = tbodys[i].childNodes;
      for(var j = 0 ; j < trs.length ; j++){//遍历tbody下的tr元素
         trs[j].onclick = function(){//给每一行添加一个onclick事件，也就是给tr注册一个事件
            if(this.style.backgroundColor == "red"){//当单击事件被触发的时候，单击一次变为红色，再次单击变为白色
               this.style.backgroundColor = "white";
            }else{
               this.style.backgroundColor = "red";
            }
            var n = this.parentNode.firstChild;
            for ( ; n; n = n.nextSibling ) {//遍历当前行的兄弟节点，让其所有兄弟节点都变成白色
               if ( n.nodeType == 1 && n != this )
               n.style.backgroundColor = "white";
            }
         }
      }
   }

}
/*遍历兄弟节点的算法，摘自Jquery，很经典的算法*/
//function getSiblings(elem){
// var r = [];
// var n = elem.parentNode.firstChild;
// for ( ; n; n = n.nextSibling ) {
// if ( n.nodeType == 1 && n != elem )
// r.push( n );
// }
// return r;
//};

</script>
</head>

<body>
<table width="1000" border="0" cellspacing="0" id="t1">
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
</table>
</body>
</html>

分享添加到桌面

评论

暂时没有评论

Zeuux © 2024

京ICP备05028076号