点击表格中的一行改变该行颜色,再点击其他行....

时间:2022-03-05 14:48:50
点击表格中的一行,改变该行颜色,再点击其他一行,颜色又改变,前面那行颜色恢复初始状态。(实际上就是选中某行的效果)
大大们请教!!!!!

5 个解决方案

#1


用CSS来做,但是每一行你都需要做一个div
这样有点麻烦而已!

#2


大大能不能给一个详细的例子,不慎感激

#3


<style>
#mytable{
width:360px;
border:1px dotted #DDD;
}
#mytable tr{
background:#CCC;
}
</style>

<script language="javascript">
function change(tr){
var table=document.getElementById("mytable");
for (i=0;i<table.rows.length ;i++ )
{
table.rows[i].style.background="#CCCCCC";//底色
}
tr.style.background="#ff0000";//点击后的颜色
}
</script>

<table id="mytable"> 
<tr onclick="change(this)">
<td>t1</td>
<td>t2</td>
</tr>
<tr onclick="change(this)">
<td>t3</td>
<td>t4</td>
</tr>
<tr onclick="change(this)">
<td>t5</td>
<td>t6</td>
</tr>
<tr onclick="change(this)">
<td>t7</td>
<td>t8</td>
</tr>
</table>

#4


CSS样式:

   .test a:link{display:block;text-align:center;height:30px;font-size:12px;color:#ffffff;background:#388107;width:100px;}
   .test a:hover{display:block;text-align:center;height:30px;font-size:12px;color:#000000;background:#cccccc;width:100px;}
   .test li{margin-top:3px;line-height:30px;}
   .test ul{list-style:none;}

BODY里面:
<div class="test" align="center">
<ul>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>

就可以了


================================================================
此帖通过csdn小助手回复。
    CSDN小助手是使用vb.net编写的CSDN论坛脱机“外挂”,她能够在
脱离IE的情况下使用Csdn论坛。程序只加载最核心的数据,所以显示更
快,产生的流量更小。

    下载地址:http://qqwwee.com/csdn.rar
================================================================

#5


谢谢 deiphi(面壁思过)

#1


用CSS来做,但是每一行你都需要做一个div
这样有点麻烦而已!

#2


大大能不能给一个详细的例子,不慎感激

#3


<style>
#mytable{
width:360px;
border:1px dotted #DDD;
}
#mytable tr{
background:#CCC;
}
</style>

<script language="javascript">
function change(tr){
var table=document.getElementById("mytable");
for (i=0;i<table.rows.length ;i++ )
{
table.rows[i].style.background="#CCCCCC";//底色
}
tr.style.background="#ff0000";//点击后的颜色
}
</script>

<table id="mytable"> 
<tr onclick="change(this)">
<td>t1</td>
<td>t2</td>
</tr>
<tr onclick="change(this)">
<td>t3</td>
<td>t4</td>
</tr>
<tr onclick="change(this)">
<td>t5</td>
<td>t6</td>
</tr>
<tr onclick="change(this)">
<td>t7</td>
<td>t8</td>
</tr>
</table>

#4


CSS样式:

   .test a:link{display:block;text-align:center;height:30px;font-size:12px;color:#ffffff;background:#388107;width:100px;}
   .test a:hover{display:block;text-align:center;height:30px;font-size:12px;color:#000000;background:#cccccc;width:100px;}
   .test li{margin-top:3px;line-height:30px;}
   .test ul{list-style:none;}

BODY里面:
<div class="test" align="center">
<ul>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>

就可以了


================================================================
此帖通过csdn小助手回复。
    CSDN小助手是使用vb.net编写的CSDN论坛脱机“外挂”,她能够在
脱离IE的情况下使用Csdn论坛。程序只加载最核心的数据,所以显示更
快,产生的流量更小。

    下载地址:http://qqwwee.com/csdn.rar
================================================================

#5


谢谢 deiphi(面壁思过)