用div+ul+li+css+js制作一张表格并实现onMouseOver表格行改变背景颜色效果


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div等高处理</title>
<style type="text/css">
a {
text-decoration:none;
width:100%;
}
div {
width:300px;
}
div ul li {
padding:1px;
list-style: none;
border-bottom: 1px solid #23801C;
cursor:hand;
}
</style>
<script type="text/javascript">
addEvent = function(){
var _li = document.getElementsByTagName("li");
for(var i=0;i<_li.length;i++)
{
_li[i].onmouseover = function(){
chColor(this ,"#6699FF");
};
_li[i].onmouseout = function(){
chColor(this ,"#FFFFFF");
};
}
};
chColor = function(obj ,color){
obj.style.background = color;
};
window.onload = function(){
addEvent();
};
</script>
</head>
<body>
<div>
 <ul>
  <li>第1行第1列</li>
  <li>第1行第2列</li>
  <li>第1行第3列</li>
 </ul>
 <ul>
  <li>第2行第1列</li>
  <li>第2行第2列</li>
  <li>第2行第3列</li>
 </ul>
 <ul>
  <li>第3行第1列</li>
  <li>第3行第2列</li>
  <li>第3行第3列</li>
 </ul>
<div>
</body>
</html>

解决方案 »

  1.   

    测了下 ie ff safari ,都还可以连ID都不用指定，关键是找到对象就可以 ，是否有ID也只是个形式而已 。另：
    a {
            text-decoration:none;
            width:100%;
        }这句去掉即可！
      

  2.   

    document.getElementsByTagName("li"); 这句话好象所有的li的标签都实现了这样的效果 只想在指定的div层里实现哦关键还是靠js啊 好好研究下啊
      

  3.   

    呵呵 ，想在那个div中去获取li元素，先获取到这个div对象，然后divObj.getElementsByTagName("li")就可以了
      

  4.   

    楼主是不是过度div+css了？
    从一个极端走向别一个极端
      

  5.   

    如果一个页面里有很多个UL的话，那么我只想这一个ul里面有效果，这样的话，代码是不是就不是那么简洁了啊，更何况1楼大哥写的div完全没有起到作用啊。