日期:2014-05-16  浏览次数:20340 次

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

------解决方案--------------------
HTML code

<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>

------解决方案--------------------
最近在看jquery,其实有些东西拿jquery这些来做会是很简捷的。代码如下:
HTML code
<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>

------解决方案--------------------
1楼很厉害啊。
哎,有些人就是喜欢搞一些特殊写法。
本来是搞一个全局变量非要给window对象加个属性,这个在时间和空间复杂性上不知道好不好。
那咋也特殊一会,把那个获取id对象的去掉,for改为其他的。

JScript code
<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>

------解决方案--------------------
先写个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>