click 事件，改变颜色。。。。在线等待！

你table格式写的不对，第2个tr里面也应该有3对td，你先把格式写对了再说

解决方案 »

  1.   

    呵呵
           <table>
             <tr>
               <td>1</td>
               <td>2</td>
               <td>3</td>
             </tr>
           </table>
           我的问题是我想在点击1时改变它的颜色，当点击2时颜色也改变，而1的颜色会还原
       鼠标离开它们时颜色不会变化，只有1，2，3的CLICK事件发生时才会改变！
      菜鸟一个，谢谢答复！
      

  2.   

    var curRow;   //全局行号
    var curColor;
    function selectRow(tr1){
    if(curRow)
    curRow.bgColor=curColor; curColor=tr1.bgColor;
    tr1.bgColor="#FFE9B3";
    curRow=tr1;
    }<table>
             <tr onclick="selectRow(this)">
               <td>1</td>
               <td>2</td>
               <td>3</td>
             </tr>
             <tr>
               4
             </tr>
            </table>
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script language="JavaScript">
    <!--
    function sel()
    {
    var td = event.srcElement;
    var tr = td.parentNode;

    var col = td.cellIndex; for(var i=0;i<tr.cells.length;i++)
    {
    if(i==col)
    {
    if(col!=2)
    {
    tr.cells[i].bgColor = "#f0f0f0";
    }
    }
    else
    {
    tr.cells[i].bgColor = "#ffffff";
    }
    } tr.parentNode.rows[1].cells[0].innerText = td.innerText;

    }
    //-->
    </script>
    </head><body>
    <table>
             <tr >
               <td onclick="sel()">1</td>
               <td onclick="sel()">2</td>
               <td onclick="sel()">3</td>
             </tr>
             <tr>
               <td colspan=3>4</td>
             </tr>
            </table>
    </body>
    </html>
      

  4.   

    <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META http-equiv="Content-Type" content="text/html; charset=gb2312">
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD><BODY>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function change_color(i)
    {
    for(n=0;n<3;n++)
    {
    if(n==i)
    row1.cells[n].bgColor="red"
    else
    row1.cells[n].bgColor="" }
    }
    //-->
    </SCRIPT>
           <table border="1" width="60%">
             <tr id="row1">
               <td onclick="change_color(0)">1</td>
               <td onclick="change_color(1)">2</td>
               <td onclick="change_color(2)">3</td>
             </tr>
           </table>
    </BODY>
    </HTML>
      

  5.   

    ttyp(愿赌服输) 写的也不错，理解了dom的层次结构，想简单点实现就用我的方法
      

  6.   

    to  zhaoxiaoyang(梅雪香) 
            没有实现我所要求的功能呀
            点击1时，23会变色
            我现在的要求是点击1，2，3不变色呀，只有1变色
           点2时1还原色彩
      

  7.   

    不会呀，，，，
             我怎么敢玩呀
             TO：abc666(狂奔)   
                你的可以达到要求，但是鼠标离开后，颜色又还原啦呀
                我不想让它改，直到点击其它的才行哈
      

  8.   

    这几天好多人问变色的问题，今天在公司没事写了一个。在IE和Mozilla下都ok，想加或改颜色直接在color数组中作手脚就可以了，应该算是个通用的了<HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Author" CONTENT="Jorger">
    <script>
    var colorId = 0;
    color = new Array();
    color[0] = "#00FFFF";
    color[1] = "#FF66CC";
    color[2] = "#CCFF00";
    color[3] = "#FF0000";
    color[4] = "#9966FF";
    color[5] = "#FFFF00";
    color[6] = "#FF9900";
    function changeColor(obj)
    {
    if(colorId != (color.length-1))
    {
    colorId++;
    obj.bgColor = color[colorId];
    }
    else 
    {
    colorId = 0;
    obj.bgColor = color[colorId];
    }
    }
    </script>
    </HEAD><BODY>
    <table border="1" width="40%">
    <tr onmouseover="changeColor(this)" onmouseout="this.bgColor='white'"><td>Line 0</td></tr>
    <tr onmouseover="changeColor(this)" onmouseout="this.bgColor='white'"><td>Line 1</td></tr>
    <tr onmouseover="changeColor(this)" onmouseout="this.bgColor='white'"><td>Line 2</td></tr>
    <tr onmouseover="changeColor(this)" onmouseout="this.bgColor='white'"><td>Line 3</td></tr>
    <tr onmouseover="changeColor(this)" onmouseout="this.bgColor='white'"><td>Line 4</td></tr>
    <tr onmouseover="changeColor(this)" onmouseout="this.bgColor='white'"><td>Line 5</td></tr>
    <tr onmouseover="changeColor(this)" onmouseout="this.bgColor='white'"><td>Line 6</td></tr>
    <tr onmouseover="changeColor(this)" onmouseout="this.bgColor='white'"><td>Line 7</td></tr>
    <tr onmouseover="changeColor(this)" onmouseout="this.bgColor='white'"><td>Line 8</td></tr>
    <tr onmouseover="changeColor(this)" onmouseout="this.bgColor='white'"><td>Line 9</td></tr>
    </table>
    </BODY>
    </HTML>