求“点击表格整行变色”的代码

Question

大侠们好：小弟有一个难题想得到你的指引！
有一个表格，上面上n行，我想实现这样一个效果：点击表格内任意一行之后该行会高亮显示，其它行不变，而点击另外一行的时候，刚才高亮的那行自动变回原样，新点击的那行高亮，请问该效果应该怎样实现呢？谢谢

Answer 1

<script>
onload=function(){
var tbl = document.getElementById("tbl");
for(var i = 0; i < tbl.rows.length; i++){
tbl.rows[i].onclick =function(){
if(window.cur) window.cur.style.background = "#FFF";
this.style.background = "#CCC";
window.cur = this;
}
}
}
</script><table id="tbl" cellspacing="0">
<tr><td>xx</td><td>xx</td></tr>
<tr><td>xx</td><td>xx</td></tr>
<tr><td>xx</td><td>xx</td></tr>
<tr><td>xx</td><td>xx</td></tr>
</table>

Answer 2

可以再优化下:
for(var i = 0,len=tbl.rows.length; i <len ; i++){...}可能会有很多行.

Answer 3

window.cur是什么意思？请教 谢谢

Answer 4

最近在看jquery，其实有些东西拿jquery这些来做会是很简捷的。代码如下：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){

$("#main tr").click(function(){

$(this).css("background-color","red").siblings().css("background-color","");

})
})
</script>
<table id="main" width="200" border="1" style="margin:100px auto; text-align:center;">
  <tr>
    <td>第一行</td>
    <td>第一行</td>
  </tr>
  <tr>
    <td>第二行</td>
    <td>第二行</td>
  </tr>
  <tr>
    <td>第三行</td>
    <td>第三行</td>
  </tr>
  <tr>
    <td>第四行</td>
    <td>第四行</td>
  </tr>
  <tr>
    <td>第五行</td>
    <td>第五行</td>
  </tr>
</table>本人刚开了个小博  还没发什么文章 大家可以看看哦 ：格桑的blog

Answer 5

1#的方法好，有点类似jq了。用jq的话相对容易，1#值的学习，收藏了。

Answer 6

1楼很厉害啊。
哎，有些人就是喜欢搞一些特殊写法。
本来是搞一个全局变量非要给window对象加个属性,这个在时间和空间复杂性上不知道好不好。
那咋也特殊一会，把那个获取id对象的去掉,for改为其他的。<script>
onload=function(){
    for(var i in tbl.rows){
        tbl.rows[i].onclick =function(){
            if(window.cur) window.cur.style.background = "#FFF";
            this.style.background = "#CCC";
            window.cur = this;
        }
    }    
}    
</script>

Answer 7

用纯css比较好。总觉得js处理的话很费资源。

Answer 8

先写个CSS类：
<style type="text/css">
<!-- 
.light
{
background-color:#99FF00;
} -->
</style>
<script>
function onFocus()
{
document.form1.name.classname="light";
document.form1.name.value="";}
function our()
{
document.form1.name.classname="";
}</script>
.
.
.
.
<form name="form1">
<input name="name" value="XX">
</form>