Question

用div+ul+li+css+js制作一张表格并实现变色效果

用div+ul+li+css+js制作比如3行3列的表格，当鼠标移到某一行上的时候改变这么行的背景颜色,在IE和firefox都能实现。

不要用table标签。li不是连接，不要使用a:hover,不要给每个ul或li指定id或class,只给div指定id,然后编写js或vb调用方法现实，如果光靠css实现那当然更好了。表格的布局格式如下：
<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>

Answer 1

<div>
<ul>
<li style="background:#ececec" onMouseOver="this.style.background='#ffffff'" onMouseOut="this.style.background='#ececec'">第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>
楼上的要求恐怕只有高手中的高高手 可能会做出来！！~~

首先，一个 div 里面有 n 个 li ,你要鼠标滑过哪个li,又是要哪个li变色？不指定 li 的 id ，是不可能 对指定的 li 实施背景变色的！

就好比有一个足球队 ，11个人都叫 张三 ，队长喊“张三，向前冲；张三 回去防守；张三 快接球；张三 到我这里来... ”, 请问你明白我的意思吗？

Answer 2

首先我得告诉你，
如果3行3列的数据格局你不用table标签 而用 ul li 来组合生成，那么你更本就没理解 w3c 的精髓。

你这个 不用id，我给你个思路，不过代码很复杂，我不想浪费无用的时间解决这种完全没用的效果。

首先由于你不说不能使用Id 所以 我们获取所有的 所有 div#id 下面的ul 然后获取每个ul 下面的li储存成数组
分别是 [0,0][0,1][0,2];[1,0][1,1][1,2];[1,0][1,1][1,2]
然后给每个li元素加上2个动作，一个鼠标移动上去的动作，这个时候遍历所有数组，数组二维值第2个等于0的所有数据背景颜色改变。
当鼠标离开，所有背景颜色取消。

其他的也是这样。

这个方法很傻很天真，强烈建议楼主不要这么做。用其他方法代码少，而且逻辑简单，这个方法有点类似与json的写法

Answer 3

楼上几位还是没有看清楚题目，其实楼主的问题是行变色而不是列变色，也就是事件触发在UL上而不是在DIV和LI上，UL不能指定ID。

试试下面这样看看能不能满足你的要求，代码非常简单，完全符合楼主的要求，没有指定任何ID、Hover、CLASS：

<style type="text/css">
<!--
div{border:#000 solid 2px;padding:0px;margin:0px}
div ul{width:606px;height:50px;padding:0px;margin:0px;list-style:none}
div ul li{border:1px #ccc solid;width:200px;height:50px;line-height:50px;text-align:left;font-weight:bold;float:left}
-->
</style>
<div>
<ul onmouseover="javascript:this.style.background='#cccccc';" onmouseout="javascript:this.style.background='';">
<li>第1行第1列</li>
<li>第1行第2列</li>
<li>第1行第3列</li>
</ul>
<ul onmouseover="javascript:this.style.background='#cccccc';" onmouseout="javascript:this.style.background='';">
<li>第2行第1列</li>
<li>第2行第2列</li>
<li>第2行第3列</li>
</ul>
<ul onmouseover="javascript:this.style.background='#cccccc';" onmouseout="javascript:this.style.background='';">
<li>第3行第1列</li>
<li>第3行第2列</li>
<li>第3行第3列</li>
</ul>
<div>

补充一下：
如二楼 23458441 所言：“如果3行3列的数据格局你不用table标签 而用 ul li 来组合生成，那么你更本就没理解 w3c 的精髓。”本人同意其中一部分说法，就是在方便的情况下任何标签都可以使用，但这也并不是说 W3C 的精髓是你一定要使用TABLE表示表格，W3C 的精髓是更方便的管理数据及数据的表现形式，例如在XML中，所有的标签已经没有其实际意义，而只是组织数据的手段，也就是说<table>,<div>,甚至<dddd>都是一样的，我可以把任何标签组合定义为表格，包括自定义标签。

4楼 zhoudz_jxdy 的在FIREFOX上面有问题。

这个问题不错，长知识！

Answer 4

<style type="text/css">
/*<![CDATA[*/
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -300px;
}
.liclass1{
background:#FFF000;
}
/*]]>*/
</style>
</div>
<div style="background:#000000;width:610px;height:200px;" id="d">
<div style="background:#404040;width:200px;height:200px;"><ul >
<li onmouseOver="changeClass1(document.all.d,0)" onmouseOut="changeClass2(document.all.d,0)">第1行第1列</li>
<li onmouseOver="changeClass1(document.all.d,1)" onmouseOut="changeClass2(document.all.d,1)">第1行第2列</li>
<li onmouseOver="changeClass1(document.all.d,2)" onmouseOut="changeClass2(document.all.d,2)">第1行第3列</li>
</ul> </div>
<div style="background:#FD7C03;width:200px;height:200px;margin:-100px 0 0 -100px;">
<ul>
<li onmouseOver="changeClass1(document.all.d,0)" onmouseOut="changeClass2(document.all.d,0)">第2行第1列</li>
<li onmouseOver="changeClass1(document.all.d,1)" onmouseOut="changeClass2(document.all.d,1)">第2行第2列</li>
<li onmouseOver="changeClass1(document.all.d,2)" onmouseOut="changeClass2(document.all.d,2)">第2行第3列</li>
</ul> </div>
<div style="background:#eee;width:200px;height:200px;margin:-100px 0 0 100px;"><ul >
<li onmouseOver="changeClass1(document.all.d,0)" onmouseOut="changeClass2(document.all.d,0)">第3行第1列</li>
<li onmouseOver="changeClass1(document.all.d,1)" onmouseOut="changeClass2(document.all.d,1)">第3行第2列</li>
<li onmouseOver="changeClass1(document.all.d,2)" onmouseOut="changeClass2(document.all.d,2)">第3行第3列</li>
</ul></div></div>
<script>
function changeClass1(obj,count){
if(obj.childNodes.length<=0){
return ;
}
for(var j = 0;j< obj.childNodes.length; j++)
{
if(obj.childNodes[j].childNodes.length<=0){
continue;
}
for(var k =0 ; k <obj.childNodes[j].childNodes.length ;k ++){
if(obj.childNodes[j].childNodes[k].childNodes.length<count){
continue;
}
obj.childNodes[j].childNodes[k].childNodes[count].className="liclass1"
} //for
}//for
}
function changeClass2(obj,count){
if(obj.childNodes.length<=0){
return ;
}
for(var j = 0;j< obj.childNodes.length; j++)
{
if(obj.childNodes[j].childNodes.length<=0){
continue;
}
for(var k =0 ; k <obj.childNodes[j].childNodes.length ;k ++){
if(obj.childNodes[j].childNodes[k].childNodes.length<count){
continue;
}
obj.childNodes[j].childNodes[k].childNodes[count].className=""
} //for
}//for
}
</script>
你看看是不是你要的结果
我也觉得 太麻烦了 而且性能上也不好,不过当技术思考还是可以的! 你又让我 的思维开阔了些 ,谢谢
直接新建一个网页!把上面的代码拷进去 运行就可以了