关于单元规格点击变色问题，谢谢

onclick事件触发
清除所有tr颜色，
给指定tr颜色 

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
     <head>
      <title> New Document </title>
      <style>
      #otbl{
        width:200px;
        height:100px;
        border:1px solid #C0C0C0;
        text-align:center;
        font-size:9pt;
        border-collapse:collapse
      }
      #otbl td{
        border:1px solid #C0C0C0;
      }
      .tt{background-color:#336699} 
      </style>
      <script language="JavaScript">
      <!--
        function show(obj){
    for(var i = 0,otr = obj.parentNode.rows;i < otr.length;i++){
    otr[i].className = "";
    }
            obj.className = "tt";
        }  //-->
      </script>
     </head> <body>
      <table id="otbl" class="otable">
      <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
      </tr>
      <tr onclick="show(this)">
        <td>Tom</td>
        <td>22</td>
        <td>男</td>
      </tr>
      <tr onclick="show(this)">
        <td>Tony</td>
        <td>23</td>
        <td>女</td>
      </tr>
      </table>
     </body>
    </html>
      

  2.   

    不能清除 单元行原有的class name
      

  3.   

    <script type="text/javascript">
     var tmp;
     a(obj,idx)
    {
      if(typeof(tmp)!='undefined')
      {
        document.getElementById('tab1').rows[tmp-1].className='C'+tmp;
      }
      obj.className = 'tt';
      tmp = idx;
      }
    </script>
      

  4.   

    上面有点错误，测试是可行的：<script type="text/javascript"> 
    var tmp; 
    function a(obj,idx) 
    { 
      if(typeof(tmp)!='undefined') 
      { 
        document.getElementById('tab1').rows[tmp-1].className='C'+tmp; 
      } 
      obj.className = 'tt'; 
      tmp = idx; 
      } 
    </script>
      

  5.   

    To 5楼主：假设 tr 原有的class name 不是以 c1 或 c2 这样的名称，比如 datalist代替 c1,data_blank 代替 c2document.getElementById('tab1').rows[tmp-1].className='C'+tmp;
    这行如何更改。谢谢
      

  6.   

    document.getElementById('tab1').rows[tmp-1].className="datalist";
    datalist这就是样式classname的名称，你样式里定义什么就是什么了
     
      

  7.   


    to6楼：这样试试
    <script type="text/javascript"> 
    var tmp; 
    var cname;
    function a(obj,idx) 
    { 
      if((typeof(tmp)!='undefined')&&(typeof(cname)!='undefined')) 
      { 
        document.getElementById('tab1').rows[tmp-1].className=cname; 
      } 
      cname = obj.className;
      obj.className = 'tt'; 
      tmp = idx; 
      
      } 
    </script>
      

  8.   

    不用每行都写onclick事件
    <%@ Page language="c#" Codebehind="WebForm7.aspx.cs" AutoEventWireup="false" Inherits="test.WebForm7" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    <HTML>
    <HEAD>
    <title>WebForm7</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    <script language=javascript>
    function SelectClick()
    {
    var oRow = null; //保存行对象
    var oNode = event.srcElement; //保存触发该事件的对象

    if(oNode.tagName == "TD") //如果在表格中单击的是单元格，则触发该事件的就是该单元格(tagName为对象的标签类型)
    {
    oRow = oNode.parentNode; //由于是单元格，所以它对应的行对象就它的父节点
    }
    else if(oNode.tagName == "A" || oNode.tagName == "INPUT" || oNode.tagName == "FONT" || oNode.tagName == "SPAN")//如果在表格中单击的是单元格中对应的对象，则触发该事件的就是该单元格中的这些对象
    {
    oRow = oNode.parentNode.parentNode; //由于是单元格中的对象，所以它的父节点是单元格，单元格的父节点才是行
    }
    else
    {
    return; //如果点的是另外的地方(表格中有可能点到表格对象，如果点到的是表格对象则不能获取到想要删除的行的索引，所以不能删除)
    }

    if(oRow.rowIndex > 0) //如果不是表头，则进行背景颜色设置
    {
    var oTable = oRow.parentNode; //获取表对象
    var iRowCount = oTable.rows.length; //获取表的行数

    for(var i=0 ; i<iRowCount ; i++) //将已经设置背景的行的背景色去掉
    {
    if(oTable.rows[i].style.backgroundColor == "#ccffcc")//如果已经设置了背景色
    {
    oTable.rows[i].style.backgroundColor = "";//去掉背景色，style表示的是HTML中对象的样式，backgroundColor只是style中的一个样式，还有如:display等
    oTable.rows[i].cells[0].childNodes[0].checked = false;
    break;
    }
    }
    oRow.style.backgroundColor = "#ccffcc";//设置当前选择行的背景色
    oRow.cells[0].childNodes[0].checked = true;
    }
    }
    </script>
    </script>
    </HEAD>
    <body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post" runat="server">
    <FONT face="宋体">
    <TABLE id="tbInfo" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" onclick="SelectClick()"
    cellSpacing="0" cellPadding="0" width="100%" align="center" border="0">
    <TR>
    <TD id="No" vAlign="middle" noWrap align="center" bgColor="darkgray"></TD>
    <TD id="Name" vAlign="middle" noWrap align="center" bgColor="darkgray">Name</TD>
    <TD vAlign="middle" noWrap align="center" bgColor="#a9a9a9">Tel</TD>
    <TD id="Sex" vAlign="middle" noWrap align="center" bgColor="darkgray">Fax</TD>
    </TR>
    <TR>
    <TD noWrap align="center"><INPUT type="checkbox"></TD>
    <TD noWrap align="center">test1</TD>
    <TD noWrap align="center">123456</TD>
    <TD noWrap align="center">123456</TD>
    </TR>
    <TR>
    <TD noWrap align="center"><INPUT type="checkbox"></TD>
    <TD noWrap align="center">test2</TD>
    <TD noWrap align="center">123456</TD>
    <TD noWrap align="center">123456</TD>
    </TR>
    <TR>
    <TD noWrap align="center"><INPUT type="checkbox"></TD>
    <TD noWrap align="center">test3</TD>
    <TD noWrap align="center">123456</TD>
    <TD noWrap align="center">123456</TD>
    </TR>
    <TR>
    <TD noWrap align="center"><INPUT type="checkbox"></TD>
    <TD noWrap align="center">test4</TD>
    <TD noWrap align="center">123456</TD>
    <TD noWrap align="center">123456</TD>
    </TR>
    </TABLE>
    </FONT>
    </form>
    </body>
    </HTML>