<head>
<style type="text/css">
table{
border:#0099FF 1px solid;
width:600px;
border-collapse:collapse;}
table td,table th{
border:#0099FF 1px solid;
padding:10px 0px 10px 10px;
}
table th{
background-color:#00CCFF;
}
.one{
background-color:#CCFF66;}
.two{
background-color:#FF9900;}
.three{
background-color;#00DDFF;
}
#fourth{
background-color;#00DEFF;//此处将设置ID的值,以提高显示权限。
}
</style>
<script type="text/javascript">
function list(){
var name;
var nodetd=document.getElementsByTagName("tr");
for(var i=0;i<nodetd.length;i++)
{
if((i+1)%2==0)
nodetd.className="one";
else
nodetd.className="two";
nodetd.onmouseover=function()
{
name=this.className;
this.className="three";
}
nodetd.onmouseout=function()
{
this.className=name;
}
nodetd.onclick=function()
{
if(this.id=="fourth")
this.id="";
else
this.id="fourth";
alert(this.id);//貌似这里出现问题,能正常显示ID值,但是就是不能显示出相应的样式。
}
}
}
onload=function(){
list();
}
</script>
</head>
<body>
<table>
<tr><th>电影名称</th><th>电影介绍</th><th>主演名单</th></tr>
<tr><td>吊袜带</td><td>第就爱加大阿达</td><td>大的热情</td></tr>
<tr><td>吊袜带</td><td>第就爱加大阿达</td><td>大的热情</td></tr>
<tr><td>吊袜带</td><td>第就爱加大阿达</td><td>大的热情</td></tr>
<tr><td>吊袜带</td><td>第就爱加大阿达</td><td>大的热情</td></tr>
<tr><td>吊袜带</td><td>第就爱加大阿达</td><td>大的热情</td></tr>
<tr><td>吊袜带</td><td>第就爱加大阿达</td><td>大的热情</td></tr>
<tr><td>吊袜带</td><td>第就爱加大阿达</td><td>大的热情</td></tr>
<tr><td>吊袜带</td><td>第就爱加大阿达</td><td>大的热情</td></tr>
</table>
</body>
上面是根据老师的高亮显示自己动手练习了一遍,实现的效果是行与行之间的颜色交替变化,当点击每一行时出现高亮效果。但问题是就是高亮的效果点击不出来,我已经检查了好长时间,实在是头疼,求大家帮我看看错在哪儿。 |
|