不对啊 我要实现的效果是这样的 谁来帮我啊 关于div+css制作表格特效

<html><head><title></title>
<style>
*{margin:0;padding:0}
#aa{float:left;}
ul{
float:left;
list-style:none;
width:700px;
}
li{
float:left;
width:140px;
height:20px;
border-top:1px solid #000;
border-left:1px solid #000;
}
#lastL li{
border-bottom:1px solid #000;
}
.lastL{
border-right:1px solid #000;
}
</style>
<script language="javascript">
function jj(){
var r=aa.getElementsByTagName("ul").length
for(i=0;i<r;i++){
document.getElementById("aa").getElementsByTagName("ul")[i].onmouseover=a1
document.getElementById("aa").getElementsByTagName("ul")[i].onmouseout=a2
}
}
function a1(){
this.style.background="gainsboro"
}
function a2(){
this.style.background="#fff"
}
</script>
</head>
<body onload="jj()">
<div id="aa">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="lastL"></li>
    </ul>
<ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="lastL"></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="lastL"></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="lastL"></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="lastL"></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="lastL"></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="lastL"></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="lastL"></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="lastL"></li>
    </ul>
    <ul id="lastL">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="lastL"></li>
    </ul>
</div>
</body></html>

解决方案 »

  1.   


    <html><head><title></title>
    <style>#bb UL {
    FLOAT: left; TEXT-ALIGN: left; MARGIN: 0px; HEIGHT: 20px;background-color:#fff; PADDING: 0px; width:750px; border:1px solid #000; border-bottom:0px;
    }
    #bb UL LI {
    FLOAT: left; TEXT-ALIGN: left; border-right:1px solid #000;
    padding:0px; margin:0px; display:block;width:140px; line-height:20px; float:left;
    }#bb .ul_bottom
    {
        border-bottom:1px solid #000;
    }
    #bb .li_right
    {
        border-right:0;
    }
    </style>
    <script language="javascript">
    function jj(){
    var r=bb.getElementsByTagName("ul").length;
    for(i=0;i<r;i++){
    document.getElementById("bb").getElementsByTagName("ul")[i].onmouseover=a1
    document.getElementById("bb").getElementsByTagName("ul")[i].onmouseout=a2
    }
    }
    function a1(){
    this.style.background="gainsboro"
    }
    function a2(){
    this.style.background="#fff"
    }function jj2(){
    var r=bb.getElementsByTagName("ul").length;
    for(i=0;i<r;i++){
    document.getElementById("bb").getElementsByTagName("ul")[i].onmouseover=a1
    document.getElementById("bb").getElementsByTagName("ul")[i].onmouseout=a2
    }
    }
    </script>
    </head>
    <body onload="jj()">
    <div id="bb">
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
            <li>ddd</li>
            <li class="li_right">eee</li>
        </ul>
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
            <li>ddd</li>
            <li class="li_right">eee</li>
        </ul>
        <ul class="ul_bottom">
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
            <li>ddd</li>
            <li class="li_right">eee</li>
        </ul>
    </div>
    </body></html>
      

  2.   

    测试通过:<html>
    <title>Div模拟表格行响应鼠标改变底色<title>
    <head>
    <script language="javascript">
    function jj()
    {
    var r=aa.getElementsByTagName("ul").length
    var obj=aa.getElementsByTagName("ul");
    for(i=0;i<r;i++)
    {
    obj[i].onmouseover=a1
    obj[i].onmouseout=a2
    }
    }
    function a1()
    {
    var objs = this.getElementsByTagName("li")
    for(var i = 0;i < objs.length;i++) objs[i].style.background="gainsboro"
    }
    function a2()
    {
    var objs = this.getElementsByTagName("li")
    for(var i = 0;i < objs.length;i++) objs[i].style.background="#FFFFFF"
    }
    </script>
    <style type="text/css">
    .csstb{
    font-size:12px;
    width:595px;
    border-right:#999999 solid 1px;
    border-bottom:#999999 solid 1px;
    }
    .csstb div,.csstb li{
    float:left;
    width:198px;
    line-height:20px;/*行高*/
    border-top:#999999 solid 1px;
    border-left:#999999 solid 1px;
    }
    .csstb ul{
    margin:0px;
    padding:0px;
    list-style:none;
    }
    </style>
    </head>
    <body onload="jj()">
    <div class="csstb" id="aa">
    <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>