如何实现点击表格内一行，该行内所有格子都变色？欢迎讨论

function changeColor(src){
    var rows=src.parentElement.rows.length;
    for(i=0;i<rows;i++)
    {
        src.parentElement.rows(i).bgColor="FFFFFF";
    }
    src.bgColor = "#eeeeFF";
}
<tr onclick="javascript:changeColor(this)">

解决方案 »

  1.   

    我希望能用上预先定义好的css，你有什么看法吗？
      

  2.   

    <style>
    .MouseOverClick {background-color: #E0E0E0}
    .MouseOutWhite  {background-color: #FFFFFF}
    </style><body>
    <table id=table1 border=1 width=100>
    <tr><td>a</td><td>a</td></tr>
    <tr><td>b</td><td>b</td></tr>
    <tr><td>c</td><td>c</td></tr>
    <tr><td>d</td><td>d</td></tr>
    </table><script language="JavaScript"><!--
    function document.onclick()
    {
    var e = document.getElementById("table1")
    if(e.componentFromPoint(event.clientX,event.clientY)=="outside")
    for (var i=0; i<e.rows.length; i++)
    {
    e.rows[i].className = "MouseOutWhite";
    }
    }
    function mm()
    {
    var s = document.getElementById("table1");
    for (var i=0; i<s.rows.length; i++)
    {
    s.rows[i].className = "MouseOutWhite";
    }
    var e = window.event.srcElement;
    while(e=e.parentElement)
    {
    if (e.tagName == "TR") break;
    }
    e.className = "MouseOverClick";
    }
    document.getElementById("table1").onclick = mm;
    //--></script>
      

  3.   

    程序运行报告document.getElementById()不是对象，document
    有这个方法？
      

  4.   

    你的IE版本太低了, 我用了这个只是想兼容NS, 其实你还可以写:
    document.all.table1    //只适用于IE
      

  5.   

    我用的是ie5,是不是在ie6里添加了这个方法？这个方法的作用是
    根据别名定位吗？
      

  6.   

    梅花雨，这里的问题报告：document.all.table1不是对象
      

  7.   

    在升级到ie6以后，还是有document.getElementById()为空或不是对象
      

  8.   

    <head>
    <style>
    .MouseOverClick {background-color: #E0E0E0}
    .MouseOutWhite  {background-color: #FFFFFF}
    </style>
    </head><body>
    <script>         
    var h=null
    function highLight(){
    var e=event.srcElement;
    if(e.tagName!="TD")return;
    e=e.parentElement
    if(!h)h=e;
    h.className='MouseOutWhite ';
    h=e;
    h.className='MouseOverClick';
    }
    </script>
    <table border="1" width="100" onclick="highLight()">
      <tr>
        <td width="50%">　</td>
        <td width="50%">　</td>
      </tr>
      <tr>
        <td width="50%">　</td>
        <td width="50%">　</td>
      </tr>
      <tr>
        <td width="50%">　</td>
        <td width="50%">　</td>
      </tr>
      <tr>
        <td width="50%">　</td>
        <td width="50%">　</td>
      </tr>
    </table></body>
      

  9.   

    http://expert.csdn.net/Expert/topic/1673/1673838.xml?temp=.6557123
      

  10.   

    其实上述代码单独的例子我都可以试验通过，梅花雨的例子没问题
    不过我的table原先有样式代码如下
    <link rel="stylesheet" href="mystyle.css" type="text/css"><table width="100%" border="0"  class="BoderTable_Boder" >
        <tr>
          <td class="DataTable_Tdbgcolor_Even">aa</td>
          <td class="DataTable_Tdbgcolor_Even">bb</td>
          <td class="DataTable_Tdbgcolor_Even">cc</td>
        </tr>
    加入代码就不会显示背景色的改变，但是MouseOverClick里的鼠标定义还是实现了
    有没有什么看法？诸位大虾
      

  11.   

    试试把我写的代码改变
    h.style.backgroundColor='#ffffff';
    h=e;
    h.style.backgroundColor='#E0E0E0';
      

  12.   

    是原td里的css样式表造成的！当我去除了这些class=""后，工作正常
    谢谢各位，结帖拿分。