求一段JavaScript~关于table点击操作

想要的效果是：点击行头（或列头） 对应的整行（或整列）颜色变化  但是行头和列头颜色不变再次点击选中行头（或列头）时 颜色恢复为原来颜色~如果点新的一行或列，之前的行或列颜色恢复，新点击的行变色如果可以的话 希望行和列可以同时被选中一行
就是可以看到交集那种效果~~
万分感谢。

解决方案 »

  1.   


    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
        </head>
        <script language=javascript>
            var t, n, c;
            var lastrow;
            var lastbgcolor=[];
            lastbgcolor[0]="#ffffff";
            lastbgcolortr="#ffffff"
            function over(){
                document.getElementById("tb").style.backgroundColor="red"
            }
            window.onload=function(){
                t = document.getElementById("tb");            n = t.rows.length;
                for(var i=0;i<n;i++){                t.rows[i].onclick = function(){
                        if(lastrow == this) return false;
                        if(lastrow!=null){
                            lastrow.style.backgroundColor = lastbgcolortr;
                            var c=lastrow.getElementsByTagName("td");
                            for(k=0;k<c.length;k++){
                                c[k].style.backgroundColor=lastbgcolor[k];
                            }
                        }
     
                        lastrow = this;                        lastbgcolortr=this.style.backgroundColor;
                        var b=this.getElementsByTagName("td");
                        for(j=0;j<b.length;j++){
                            lastbgcolor[j]=b[j].style.backgroundColor;
                            b[j].style.backgroundColor="#EEE";
                        }                };
                }
                          
            }
        </script>
        <body >
            <table id="tb" border=1px gray> 
                <tr style="background:#FFFFE0"> <td>11 </td> <td>12 </td> <td id="a1" style="background-color:#FFDDE0">13 </td> <td>14 </td> <td>15 </td> </tr> 
                <tr> <td>21 </td> <td>22 </td> <td id="a2" style="background-color:#FFDDE0">23 </td> <td>24 </td> <td>25 </td> </tr> 
                <tr> <td>31 </td> <td>32 </td> <td id="a3" style="background-color:#FFDDE0">33 </td> <td>34 </td> <td>35 </td> </tr> 
                <tr> <td>41 </td> <td>42 </td> <td  id="a4" style="background-color:#FFDDE0">43 </td> <td>44 </td> <td>45 </td> </tr> 
                <tr> <td>51 </td> <td>52 </td> <td id="a5" style="background-color:#FFDDE0">53 </td> <td>54 </td> <td>55 </td> </tr> 
            </table>     </body>
    </html>
      

  2.   

    修改了下,这个满足你的要求.<html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
        </head>
        <script language=javascript>
            var t, n, c;
            var lastrow;
            var lastbgcolor=[];
            lastbgcolor[0]="#ffffff";
            lastbgcolortr="#ffffff";
            var lasttd=-1
            function over(){
                document.getElementById("tb").style.backgroundColor="red"
            }
            window.onload=function(){
                t = document.getElementById("tb");            n = t.rows.length;
                for(var i=0;i<n;i++){
                    /* t.rows[i].onclick = function(){
                        if(lastrow == this) return false;
                        if(lastrow!=null){
                            lastrow.style.backgroundColor = lastbgcolortr;
                            var c=lastrow.getElementsByTagName("td");
                            for(k=0;k<c.length;k++){
                                c[k].style.backgroundColor=lastbgcolor[k];
                            }
                        }
                        lastrow = this;
                        lastbgcolortr=this.style.backgroundColor;
                        var b=this.getElementsByTagName("td");
                        for(j=0;j<b.length;j++){
                            lastbgcolor[j]=b[j].style.backgroundColor;
                            b[j].style.backgroundColor="#EEE";
                        }                };*/
                    t.rows[i].cells[0].onclick=(function(i){
                        return function(){
                            if(lastrow == t.rows[i]) return false;
                            if(lastrow!=null){
                                lastrow.style.backgroundColor=lastbgcolortr
                            }
                            lastbgcolortr=t.rows[i].style.backgroundColor;
                            t.rows[i].style.backgroundColor="#EEE";
                            lastrow=t.rows[i];
                            
                        }
                    })(i);
                }
                var tdlen= t.rows[0].cells.length;
                for(var j=1;j<tdlen;j++){
                    t.rows[0].cells[j].onclick=(function(j){
                        return function(){
                            var trlen = t.rows.length;
                            if(lasttd==j)  return false;
                            if(lasttd!=-1){
                                for(var k=0;k<trlen;k++){
                                     t.rows[k].cells[lasttd].style.backgroundColor=lastbgcolor[k]
                                }
                            }
                            lasttd=j;
                            for(var k=0;k<trlen;k++){
                                lastbgcolor[k]=t.rows[k].cells[j].style.backgroundColor;
                                t.rows[k].cells[j].style.backgroundColor="#cceeff";
                            }
                        }
                    })(j)
                }        
            }
        </script>
        <body >
            <table id="tb" border=1px gray> 
                <tr style="background:#FFFFE0"> <td>11 </td> <td>12 </td> <td id="a1" style="background-color:#FFDDE0">13 </td> <td>14 </td> <td>15 </td> </tr> 
                <tr> <td>21 </td> <td>22 </td> <td id="a2" style="background-color:#FFDDE0">23 </td> <td>24 </td> <td>25 </td> </tr> 
                <tr> <td>31 </td> <td>32 </td> <td id="a3" style="background-color:#FFDDE0">33 </td> <td>34 </td> <td>35 </td> </tr> 
                <tr> <td>41 </td> <td>42 </td> <td  id="a4" style="background-color:#FFDDE0">43 </td> <td>44 </td> <td>45 </td> </tr> 
                <tr> <td>51 </td> <td>52 </td> <td id="a5" style="background-color:#FFDDE0">53 </td> <td>54 </td> <td>55 </td> </tr> 
            </table>     </body>
    </html>
      

  3.   

    FF下和IE下都可以,写得匆忙.有问题就说下
      

  4.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
     Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Table</title>
    <style type="text/css">
    html, body{
    font:12px/1.5 "Courier New", Courier, monospace;
    }
    table{
    border:1px solid #006699; border-collapse:collapse;
    }
    table td{
    border:1px solid #006699;  
    }
    .title{
    background:#F5F6FB; font-weight:bold;
    }
    .hover{
    background:#006699; color:#FFFFFF;
    }
    </style>
    <script type="text/javascript">
    var prevTR = null, prevCol = 0;
    window.onload = function(){
    var tb = document.getElementById("tb");
    tb.onclick = function(oEvent){
    var td, col, i;

    oEvent = oEvent || window.event;
    td = oEvent.target || oEvent.srcElement;
    if(td.tagName.toLowerCase() != "td"){
    return;
    }

    if(prevTR){
    tr = prevTR;
    for(i = 1; i < tr.cells.length; i++){
    if(tr != tb.rows[0]) tr.cells[i].className = "";
    }
    for(i = 1; i < tb.rows.length; i++){
    tb.rows[i].cells[prevCol].className = "";
    }
    }

    var tr = td.parentNode, col = 0;

    for(i = 1; i < tr.cells.length; i++){
    if(tr.cells[i] === td){
    col = i;
    }
    if(tr != tb.rows[0]) tr.cells[i].className = "hover";
    } if(col > 0){
    for(i = 1; i < tb.rows.length; i++){
    tb.rows[i].cells[col].className = "hover";
    }
    }

    prevTR = tr, prevCol = col;
    };
    };
    </script>
    </head><body>
    <table width="300" border="1" cellspacing="0" cellpadding="4" id="tb">
      <tr class="title">
        <td>标题</td>
        <td>标题</td>
        <td>标题</td>
        <td>标题</td>
        <td>标题</td>
        <td>标题</td>
      </tr>
      <tr>
        <td>标题</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>标题</td>
        <td>2</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>标题</td>
        <td>&nbsp;</td>
        <td>3</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>标题</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>4</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>标题</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>5</td>
        <td>6</td>
      </tr>
    </table></body>
    </html>
      

  5.   

    to BeenZ：
    刚刚试了一下，遇到点问题~
    table数据比较多  出现滚动条时~
    点完一条~
    拖动滚动条，
    再点其他行的时候，之前那行没有变回去。
      

  6.   

    请你把测试的table数据给我看看,我这里做了个很大的table,也含滚动条,没出问题..
      

  7.   

    to BeenZ： 
    抱歉，昨天后来有事离开了！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <HEAD>
    <TITLE>随滚动条移动的层</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
    <style>
    .over {background-color:EFEFEF;};
    .out {background-color:#BBCEE8;};
    .head {background-color:#00CEE8;};
    .click{ background-color:#0099CC;};
    .div{
     position: absolute;
     border: 0px solid black;
     background-color: #EFEFEF;
    }
    </style><SCRIPT LANGUAGE="JavaScript">
    //定位层
    function sc1(){
      document.getElementById("Div").style.top=(document.documentElement.scrollTop)+"px";
    document.getElementById("Div").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth- document.getElementById("Div").offsetWidth)/2)+"px";

    }function scall(){
      sc1();
    onclick();
    }
    window.onscroll=scall;
    window.onresize=scall;
    window.onload=scall;
    //--> function over(obj){
                    obj.className = "over" ;
                    obj.childNodes[0].className = "" ;
                }
    function out(obj){
                    obj.className = "out" ;
                    obj.childNodes[0].className = "head" ;
                }
    //选中行变色
    function onclick(){
            
            var t, n, c;
            var lastrow;
            var lastbgcolor=[];
            lastbgcolor[0]="#ffffff";
            lastbgcolortr="#ffffff";
            var lasttd=-1
                t = document.getElementById("tb");            n = t.rows.length;
                for(var i=0;i<n;i++){
                    /* t.rows[i].onclick = function(){
                        if(lastrow == this) return false;
                        if(lastrow!=null){
                            lastrow.style.backgroundColor = lastbgcolortr;
                            var c=lastrow.getElementsByTagName("td");
                            for(k=0;k<c.length;k++){
                                c[k].style.backgroundColor=lastbgcolor[k];
                            }
                        }
                        lastrow = this;
                        lastbgcolortr=this.style.backgroundColor;
                        var b=this.getElementsByTagName("td");
                        for(j=0;j<b.length;j++){
                            lastbgcolor[j]=b[j].style.backgroundColor;
                            b[j].style.backgroundColor="#EEE";
                        }                };*/
                    t.rows[i].cells[0].onclick=(function(i){
                        return function(){
                            if(lastrow == t.rows[i]) return false;
                            if(lastrow!=null){
                                lastrow.style.backgroundColor=lastbgcolortr
                            }
                            lastbgcolortr=t.rows[i].style.backgroundColor;
                            t.rows[i].style.backgroundColor="#0099CC";
                            lastrow=t.rows[i];
                            
                        }
                    })(i);
                }
                var tdlen= t.rows[0].cells.length;
                for(var j=1;j<tdlen;j++){
                    t.rows[0].cells[j].onclick=(function(j){
                        return function(){
                            var trlen = t.rows.length;
                            if(lasttd==j)  return false;
                            if(lasttd!=-1){
                                for(var k=0;k<trlen;k++){
                                     t.rows[k].cells[lasttd].style.backgroundColor=lastbgcolor[k]
                                }
                            }
                            lasttd=j;
                            for(var k=0;k<trlen;k++){
                                lastbgcolor[k]=t.rows[k].cells[j].style.backgroundColor;
                                t.rows[k].cells[j].style.backgroundColor="#0099CC";
                            }
                        }
                    })(j)
                }        
            }

    //行点击</SCRIPT>
    </HEAD><BODY>
    <div id="Div" class="div"  align="center" >
    <table id="tb1" border="0px" width="100%"  >  
        <tr class="head">
    <td>1 </td> 
    <td>2</td> 
    <td>3 </td> 
    <td>4</td> 
    <td>5</td> 
             </tr> 
    </table>
    </div>
    <table id="tb" border="0px" width="100%" gray> 
           <!-- <tr class="out" onMouseOver="over(this)" onMouseOut="out(this)"> -->
        <tr class="out">
                <td class="head">11 </td>
    <td class="head">11 </td>  
                <td>12 </td> 
                <td>13 </td> 
                <td>14 </td> 
                <td>15 </td> 
            </tr> 
            <!-- <tr class="out" onMouseOver="over(this)" onMouseOut="out(this)"> -->
    <tr class="out">
                <td class="head">21 </td>
    <td class="head">21 </td> 
                <td>22 </td> 
                <td>23 </td> 
                <td>24 </td> 
                <td>25 </td>
            </tr> 
            <!-- <tr class="out" onMouseOver="over(this)" onMouseOut="out(this)"> -->
    <tr class="out">
                <td class="head">31 </td>
                <td class="head">31 </td> 
                <td>32 </td> 
                <td>33 </td> 
                <td>34 </td> 
                <td>35 </td> 
            </tr> 
            <!-- <tr class="out" onMouseOver="over(this)" onMouseOut="out(this)"> -->
    <tr class="out">
                <td class="head">41 </td>
                <td class="head">41 </td> 
                <td>42 </td> 
                <td>43 </td> 
                <td>44 </td> 
                <td>45 </td> 
            </tr> 
            <!-- <tr class="out" onMouseOver="over(this)" onMouseOut="out(this)"> -->
    <tr class="out">
                <td class="head">51 </td>
                <td class="head">51 </td> 
                <td>52 </td>
                <td>53 </td>
                <td>54 </td> 
                <td>55 </td> 
            </tr> 
        </table> 
    </BODY>
    </HTML>
      

  8.   

    to BeenZ：
    上面页面~中间数据多了以后就会出现
    “点完一条~ 
    拖动滚动条， 
    再点其他行的时候，之前那行没有变回去”
    这样的情况了~
    可能是跟那个Div的那段script有冲突吧！
    呵呵~原因我也弄不懂！
    另外 我有一个其他问题想请教一下~
    就像上面的代码,
    我把表头写在了一个div里面~~
    如果要点击div里的表头
    然后让下面表格的列变色`有可能实现么？
      

  9.   

    好象是有冲突,我这里运行起来是错位的- -点div可以实现列的变色,因为我是用列的index来对应列变色的,你把div相应的index变成和列号一样来控制就行了
      

  10.   

    是说用div中选择的index来控制下面表对应index列变色么
      

  11.   

    对,div中的index对应列变色函数里的j就行了