一个表格，我点其中一行，这行颜色改变，并且这行所有的checkbox都选中，这个功能怎么实现呢？

此回复为自动发出,仅用于显示而已，并无任何其他特殊作用
楼主【wren4255】截止到2008-06-27 15:01:52的历史汇总数据(不包括此帖)：
发帖数:205                发帖分:2826               
结贴数:197                结贴分:2826               
未结数:8                  未结分:0                  
结贴率:96.10 %            结分率:100.00%            
值得尊敬

解决方案 »

  1.   

    找元素<table   border=1   width=300>   
      <tr><td>1</td><td   onclick="mm(this)">2</td></tr>   
      </table>   
        
      <SCRIPT   LANGUAGE="JavaScript">   
      function   mm(e)   
      {   
          var   td   =   searchObjByTagName(e,   "TD");   
          var   tr   =   td.parentElement;   
          alert("在第   "+   (tr.rowIndex+1)   +"   行第   "+   (td.cellIndex+1)   +"   列");   
      }   
      function   searchObjByTagName(obj,   tag)   
      {   
          while(obj!=null   &&   typeof(obj.tagName)   !=   "undefind")   
          {   
              if(obj.tagName   ==   tag.toUpperCase())   return(obj);   
              obj   =   obj.parentElement;   
          }   
          return   null;   
      }   
      </SCRIPT>   
      

  2.   


    <script>
    function check_this(obj)
     {
       if(!obj ||typeof obj != "object") return ;
       obj.style.background=="#ff7"?obj.style.background="":obj.style.background="#ff7";
       
       if(obj.childNodes)
         len = obj.childNodes.length;
         for(i=0;i<len;i++)
         {
           c = obj.childNodes[i].childNodes;
           if(c)
           for(j=0;j<c.length;j++)
           {
            if(c[j].type=="checkbox")
              c[j].checked?c[j].checked=false:c[j].checked=true;
           }
         }
      }
    </script>
    <table  border="1" bordercolor="blue" style="border:1px solid blue; border-collapse:collapse;"  cellspacing="1">
    <tr onclick="check_this(this)">
    <td><input type="checkbox"/>1 <input type="checkbox"/>2 <input type="checkbox"/>3 <input type="checkbox"/>4</td>
    <td><input type="checkbox"/>5 <input type="checkbox"/>6 <input type="checkbox"/>7 <input type="checkbox"/>8</td>
    </tr>
    <tr onclick="check_this(this)">
    <td><input type="checkbox"/>1 <input type="checkbox"/>2 <input type="checkbox"/>3 <input type="checkbox"/>4</td>
    <td><input type="checkbox"/>5 <input type="checkbox"/>6 <input type="checkbox"/>7 <input type="checkbox"/>8</td>
    </tr>
      <tr onclick="check_this(this)">
    <td><input type="checkbox"/>1 <input type="checkbox"/>2 <input type="checkbox"/>3 <input type="checkbox"/>4</td>
    <td><input type="checkbox"/>5 <input type="checkbox"/>6 <input type="checkbox"/>7 <input type="checkbox"/>8</td>
    </tr>
    </table>
    现象有了,但是事件触发有问题,checkbox也在tr里 点checkbox不好控制了.先发来看看.
      

  3.   

    好久没写js了，这是费劲
    参考楼上的实现如下你要的功能<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>    <script language="JavaScript">    
      function   getinfo()
      {
        var   e=event.srcElement;   
        if(e.tagName=="TD")
        {   
          var   r=e.parentElement.rowIndex   +1;  
          var   c   =   e.cellIndex   +1;   
          //颜色
          e.parentElement.style.background="red";   
          info.innerText   =   "当前行号："   +   r   +   "   列号："   +   c;  
          if(e.parentElement.childNodes)
          len = e.parentElement.childNodes.length;
          for(i=0;i<len;i++)
          {
              c = e.parentElement.childNodes[i].childNodes;
              if(c)
              for(j=0;j<c.length;j++)
              {
                  if(c[j].type=="checkbox")
                  //选中
                  c[j].checked?c[j].checked=false:c[j].checked=true;
              }    
          }     }   
       }   
       function del()
       {
            var   e=event.srcElement;   
            if(e.tagName=="TD")
            {   
                var   r=e.parentElement.rowIndex   +1;  
                var   c   =   e.cellIndex   +1;   
                e.parentElement.style.background="";   
            } 
            if(e.parentElement.childNodes)
              len = e.parentElement.childNodes.length;
              for(i=0;i<len;i++)
              {
                  c = e.parentElement.childNodes[i].childNodes;
                  if(c)
                  for(j=0;j<c.length;j++)
                  {
                      if(c[j].type=="checkbox")
                      //取消选中
                      c[j].checked?c[j].checked=false:c[j].checked=false;
                  }    
              }  
       }
       
        </script></head>
    <body>
        <form id="form1" runat="server">
            <div>
                <table onclick="getinfo()" onmouseout="del()" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td>
                            11</td>
                        <td>
                            12</td>
                        <td>
                            13</td>
                    </tr>
                    <tr>
                        <td>
                            21</td>
                        <td>
                            22</td>
                        <td>
                            23<input id="Checkbox3" type="checkbox" /><input id="Checkbox4" type="checkbox" /></td>
                    </tr>
                    <tr>
                        <td>
                            31</td>
                        <td>
                            32</td>
                        <td>
                            <input id="Checkbox1" type="checkbox" /><input id="Checkbox2" type="checkbox" /></td>
                    </tr>
                </table>
                <span id="info"></span>
            </div>
        </form>
    </body>
    </html>
      

  4.   

    <html>
    <head>
    <script language='javascript'>
     function show(ob)
     {
       var length=ob.childNodes.length ;
      for( var i=0;i<length;i++)
     {
        
       ob.childNodes[i].childNodes[0].checked=!ob.childNodes[i].childNodes[0].checked;
       if(  ob.childNodes[i].childNodes[0].checked)
        {
           ob.childNodes[i].bgColor='red';
         }
         else
         {
          ob.childNodes[i].bgColor='white';
          }
     } }
    </script>
     </head>
     <body>
     <table border="1" bordercolor="blue" style="border:1px solid blue; border-collapse:collapse;"  cellspacing="1" width="680px">
     <tr onclick=show(this)><td><input type='checkbox' name='check'/></td><td><input type='checkbox' name='check'/></td></tr>
     <tr onclick=show(this)><td><input type='checkbox' name='check'/></td><td><input type='checkbox' name='check'/></td></tr>
    </table>
    </body> 
    </html>
      

  5.   

    ob.childNodes[i].childNodes[0].checked=!ob.childNodes[i].childNodes[0].checked; // 选中和不选的操作
      if(  ob.childNodes[i].childNodes[0].checked) 
        { 
          ob.childNodes[i].bgColor='red';  //选中的颜色
        } 
        else 
        { 
          ob.childNodes[i].bgColor='white';  // 未选中的颜色
          } 
      

  6.   


    <html>
    <head>
        <title></title>    <script type="text/javascript">
     var lastRow;
    function selectthisrow(thisrow){thisrow.style.backgroundColor="#E7E7E7";
    var thisrowindex=thisrow.rowIndex;
    for(var i=0;i<thisrow.childNodes.length;i++)
    {  var ss= thisrow.document.getElementsByTagName("INPUT");
      for(var i=0;i<ss.length;i++)
      {
        if(ss[i].type=="checkbox"  )
        {
            if(ss[i].parentNode.parentNode.rowIndex==thisrowindex)
            {
              ss[i].checked=true;
            }
            else if(ss[i].parentNode.parentNode.rowIndex==thisrowindex-1)
            {
                 ss[i].checked=false;
            }
        }
      }
       
            
       
    }
    if(lastRow!=null && lastRow.nodeName=="TR")
    {
        lastRow.style.backgroundColor="#ffffff";
    }
    lastRow=thisrow;
    }    </script></head>
    <body>
        <form id="Form1" runat="server">
            <table style="border: 1;">
                <tr onclick="selectthisrow(this)">
                    <td>
                        <input id="Checkbox1" type="checkbox" />
                    </td>
                    <td>
                        <input id="Checkbox2" type="checkbox" />
                    </td>
                    <td>
                    </td>
                </tr>
                <tr onclick="selectthisrow(this)">
                    <td>
                        <input id="Checkbox3" type="checkbox" />
                    </td>
                    <td>
                        <input id="Checkbox4" type="checkbox" />
                    </td>
                    <td>
                    </td>
                </tr>
                <tr onclick="selectthisrow(this)">
                    <td>
                        <input id="Checkbox5" type="checkbox" />
                    </td>
                    <td>
                        <input id="Checkbox6" type="checkbox" />
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </form>
    </body>
    </html>