js如何实现点击文字td背景色切换？

怎么用js实现点击表格中多个td中的文字时，自动切换td背景，并且能够在不刷新页面的情况下传值。

解决方案 »

  1.   


    <script>
    var cur;
    function doit(){
       var obj = event.srcElement;
       if(cur == obj) return false;
       if(cur!=null) cur.style.backgroundColor = "#FFF";
       obj.style.backgroundColor = "#EEE";
       cur = obj;
       var n = obj.innerText;
       hf.location.href= "test1.asp?n=" + escape(n) + "&" +escape(new Date());
    }
    window.onload=function(){
    var tbl = document.getElementById("tb");
    var a = tb.getElementsByTagName("td");
    for(var i=0;i<a.length;i++){
       a[i].onclick=doit;
    }
    }
    </script>
    <table id="tb">
    <tr>
    <td>11</td><td>12</td>
    </tr>
    <tr>
    <td>21</td><td>22</td>
    </tr>
    </table>
    <iframe name="hf" style="display:none;"></iframe>
    test1.asp<script>
    window.onload = function(){
       alert("传入<%=Request("n")%>")
    }
    </script>
      

  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 TH_HEIGHT="20px";
            var THCOLOR="#ffff99";
            var THBGCOLOR= "#ccecff";
            var NEW_COLOR="#ffffff";
            function createEventTable() {
                var newRow,col1,col2,col3;
                var ln = document.getElementById("tb1").rows.length;
                if( ln > 0){
                    for(var i=0; i<ln; i++){
                        if(document.getElementById("tb1").rows.length <= 0)break;
                        document.getElementById("tb1").deleteRow(-1);
                    }
                }
                for(var colno=0; colno<15; colno++){    
                    newRow = document.getElementById("tb1").insertRow(-1);
                    newRow.id = 'r'+colno;
                    document.getElementById("r"+colno).height = TH_HEIGHT;
                    document.getElementById("r"+colno).bgColor = THCOLOR;
                    col1=newRow.insertCell(0);
                    col2=newRow.insertCell(1);
                    col3=newRow.insertCell(2);
                    col1.id="col1"+colno
                    col2.id = "col2"+colno;
                    col3.id = "col3"+colno;
                    col1.innerText = "列一"+colno;
                    col2.innerText = "列二"+colno;
                    col3.innerText = "列三"+colno;
                    col1.onclick=alertMe;
                    col2.onclick=alertMe
                    col3.onclick=alertMe            
                }
            }
            function alertMe(){
                this.bgColor=NEW_COLOR;
                alert("你可以将ID"+this.id+"得到并且传出");
            }
            window.onload=function(){
                createEventTable();
            }
        </script>
        <body >
            <TABLE  cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black"  border="1">
                <thead>
                <COLGROUP>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                <TR height="22px" bgColor="#ccecff">
                    <TH width="36" >列1</TH>
                    <TH width="36" >列2</TH>
                    <TH width="36" >列3</TH>
                </TR>
            </thead>
            <TBODY id="tb1">
            </TBODY>
        </TABLE></body>
    </html>
      

  3.   

    略微改动<html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
            <SCRIPT language="JavaScript" src="js/mytool.js"></SCRIPT>
        </head>
        <script language=javascript>
            var TH_HEIGHT="20px";
            var THCOLOR="#ffff99";
            var THBGCOLOR= "#ccecff";
            var NEW_COLOR="#ffffff";
            var lastObj;
            function createEventTable() {
                var newRow,col1,col2,col3;
                var ln = document.getElementById("tb1").rows.length;
                if( ln > 0){
                    for(var i=0; i<ln; i++){
                        if(document.getElementById("tb1").rows.length <= 0)break;
                        document.getElementById("tb1").deleteRow(-1);
                    }
                }
                for(var colno=0; colno<15; colno++){    
                    newRow = document.getElementById("tb1").insertRow(-1);
                    newRow.id = 'r'+colno;
                    document.getElementById("r"+colno).height = TH_HEIGHT;
                    document.getElementById("r"+colno).bgColor = THCOLOR;
                    col1=newRow.insertCell(0);
                    col2=newRow.insertCell(1);
                    col3=newRow.insertCell(2);
                    col1.id="col1"+colno
                    col2.id = "col2"+colno;
                    col3.id = "col3"+colno;
                    col1.innerText = "列一"+colno;
                    col2.innerText = "列二"+colno;
                    col3.innerText = "列三"+colno;
                    col1.onclick=alertMe;
                    col2.onclick=alertMe
                    col3.onclick=alertMe            
                }
            }
            function alertMe(){
    if(lastObj == this) return false;
    if(lastObj!=null) lastObj.style.backgroundColor = THCOLOR;
    this.style.backgroundColor = NEW_COLOR;
    lastObj = this;
    alert("你可以将ID"+this.id+"得到并且传出");
       }
            window.onload=function(){
                createEventTable();
            }
        </script>
        <body >
            <TABLE  cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black"  border="1">
                <thead>
                <COLGROUP>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                <TR height="22px" bgColor="#ccecff">
                    <TH width="36" >列1</TH>
                    <TH width="36" >列2</TH>
                    <TH width="36" >列3</TH>
                </TR>
            </thead>
            <TBODY id="tb1">
            </TBODY>
        </TABLE></body>
    </html>
      

  4.   


    怎么在本页获取这个值？
    如果我要把同一个页面其他表单中的值和这个值一起传给test1.asp，可测试却test1.asp接收不到啊,怎么办？
      

  5.   

    用我的方法,用 document.getElementById(你点击获得的id).value 得到点击时获得的TD值,然后作为参数传出就OK
      

  6.   

    搞定了！
    <script>
    var cur;
    function doit(){
       var obj = event.srcElement;
       if(cur == obj) return false;
       if(cur!=null) cur.style.backgroundColor = "#FFFFFF";
       obj.style.backgroundColor = "#FF7900";
       cur = obj;
       var n = obj.innerText;
       //hf.location.href= "index.asp?n=" + escape(n) + "&" +escape(new Date());
       document.addform.key.value=obj.innerText;
    }
    window.onload=function(){
        var tb1 = document.getElementById("tbb");
        var a = tb1.getElementsByTagName("td");
        for(var i=0;i<a.length;i++){
           a[i].onclick=doit;
        }
    }
    </script>
    <table cellpadding="0" cellspacing="0"  border="0" id="tbb">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    </tr>
    </table>
    <form name="addform" method="post" action="**.asp">
    <input type="text" name="word">
    <input name="key" type="hidden">
    <input type="submit" name="Submit2" value="sear" style="color:white;background:FF7900;border-top:#FCFF00 1px solid;border-left:#FCFF00 1px solid;border-bottom:#AA1000 1px solid;border-right:#AA1000 1px solid;">
    </form>