如何点击表格的一行，使之变色，再次点击则变回原来的颜色？

<HTML>
<HEAD><SCRIPT LANGUAGE="JavaScript" type="text/javascript">
function aa()
{
    if(TR1.bgColor == "#ff0000")
    {
    TR1.bgColor = "blue";}
    else TR1.bgColor = "red";
}
</SCRIPT>
</HEAD>
<BODY onselectstart="return false">
<table width="500" >
<tr id="TR1" onclick="aa()"><td>111111111111111111111111</td></tr></table>
</BODY>
</HTML>

解决方案 »

  1.   

    <html>
    <head><title>Test</title></head>
    <script>
    function attachTableAction()
    {
    var table_list = document.getElementsByTagName('table');
    for (var i = 0; i < table_list.length; i++)
    table_list[i].attachEvent('onclick',changeTRBgColor);
    }function changeTDBgColor()
    {
    var s = event.srcElement;
    if (s.tagName=='TD')
    {
    //highlight the line of which current td stays
    if (s.hlcolor == 'undefined') s.hlcolor='red';
    if (s.hlcolor == 'red') s.hlcolor='white';
    else s.hlcolor = 'red';
    s.style.backgroundColor=s.hlcolor;
    }
    }
    function changeTRBgColor()
    {
    var s = event.srcElement;
    var p;
    if (s.tagName == 'TD' && (p = s.parentElement).tagName == 'TR')
    {
    var tds = p.cells;
    if (p.hlcolor == 'undefined') p.hlcolor='red';
    if (p.hlcolor == 'red') p.hlcolor='white';
    else p.hlcolor = 'red';
    for (var i = 0; i < tds.length; i++)
    {
    tds[i].style.backgroundColor=p.hlcolor;
    }

    }
    }
    </script>
    <body onload="attachTableAction()">
    table1
    <table border="1" width="200">
    <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    </tr>
    <tr>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    </tr>
    <tr>
    <td>G</td>
    <td>H</td>
    <td>I</td>
    </tr>
    </table>
    table 2
    <table border="1" width="200">
    <tr>
    <td>AA</td>
    <td>BB</td>
    <td>CC</td>
    </tr>
    <tr>
    <td>DD</td>
    <td>EE</td>
    <td>FF</td>
    </tr>
    <tr>
    <td>GG</td>
    <td>HH</td>
    <td>II</td>
    </tr>
    </table>
    </body>
    </html>
      

  2.   

    table_list[i].attachEvent('onclick',changeTRBgColor);
    高亮你点击的某一行。如果
    table_list[i].attachEvent('onclick',changeTDBgColor);只高亮你点击的某个TD
      

  3.   

    <script type="text/javascript">
      //<![CDATA[
    var foo=function(o) {
    o.style.color=o.style.color=='red'?'black':'red';
    }
      //]]>
      </script>
      <body id="www.never-online.net">
    <table id="tbl" border=1 width=100%>
      <tr>
        <td onclick='foo(this)'>a</td>
      </tr>
      <tr>
        <td onclick='foo(this)'>a</td>
      </tr>
    </table>