单击表格中的一行在IE起作用，但在Firefox不起作用？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="javascript">
 function selectLine(obj)
 {
   trCount=obj.parentNode.children.length;  // 获得行数(tr)
   indexTR=obj.rowIndex //tr索引值
   lineCount=obj.children.length//一行有几个td
   for(i=1;i<trCount;i++)
   {
     for(j=0;j<lineCount;j++)
     {
         with(obj.parentNode.children[i].children[j]){
                style.backgroundColor="";
                style.cursor="pointer";
            }
     }
   }
   for(i=0;i<lineCount;i++)
   {
    obj.children[i].style.backgroundColor="#0FF";
   }
   obj.children[0].childNodes[0].checked="checked";
   obj.children[0].childNodes[0].value
  }
  </script>
<body>
<form name="selectUser">
<table   border="1" align="center" width="500px">
<tr>
<th>操作</th>
<th>名称</th>
<th>编码</th>
</tr>
  <tr  onClick="selectLine(this);" >
               <td  height="29"  ><input type="radio" name="userID" value="1"></td>
                  <td  height="29"  >Admin</td>
                  <td  height="29"  >CG0000</td>
  </tr>          
  <tr   onClick="selectLine(this);"  >
           <td  height="29"  ><input type="radio" name="userID" value="2">  </td>
                  <td  height="29"  >ab</td>
                <td  height="29"  >001</td>
  </tr>      
  <tr  onClick="selectLine(this);" >
           <td  height="29"  ><input type="radio" name="userID" value="3">  </td>
                  <td  height="29"  >cc</td>
                  <td  height="29"  >002</td>
  </tr>      
  <tr   onClick="selectLine(this);"  >
                   <td  height="29"  ><input type="radio" name="userID" value="4">  </td>
                  <td  height="29"  >dd</td>
                  <td  height="29"  >008</td>
  </tr>
</table>
</form>
</body>
</html>

解决方案 »

  1.   

            if(obj.parentNode.rows[i]){
             with(obj.parentNode.rows[i].cells[j]){
                    style.backgroundColor="";
                    style.cursor="pointer";
                }
            }外面加个判断吧。取到的trCount是10，每个tr后面还有一个textnode，tbody的chialdnodes一共5个tr加5个空文本节点。所以后面就报错了。
      

  2.   

    空白节点在w3c浏览器下也算一个节点，所以不要使用childNodes属性    function selectLine(obj) {
            trCount = obj.parentNode.rows.length;  // 获得行数(tr)
            indexTR = obj.rowIndex //tr索引值
            lineCount = obj.cells.length//一行有几个td
            for (i = 1; i < trCount; i++) {
                for (j = 0; j < lineCount; j++) {
                    with (obj.parentNode.rows[i].cells[j]) {
                        style.backgroundColor = "";
                        style.cursor = "pointer";
                    }
                }
            }
            for (i = 0; i < lineCount; i++) {
                obj.cells[i].style.backgroundColor = "#0FF";
            }
            obj.cells[0].childNodes[0].checked = "checked";
            obj.cells[0].childNodes[0].value
        }
      

  3.   

      <tr  onClick="selectLine(this);" >每个tr前面的空格也算。。
      

  4.   

    还是用jQuery吧简单兼容性好。
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <style type="text/css">
    .bgColor{ background:#0FF;}
    tr:hover{ cursor:pointer;}
    </style>
    <script src="http://cloud.xing-xing.com/jquery.js"></script>
    <script language="javascript">
    $(function(){
    $("form table tr").click(function() {
    $("form table tr").removeClass("bgColor");
            $(this).closest('tr').addClass("bgColor");
    $(this).find(':radio').attr('checked',true);
        });
    })
    </script>
    <body>
    <form name="selectUser">
    <table   border="1" align="center" width="500px">
    <tr>
        <th>操作</th>
        <th>名称</th>
        <th>编码</th>
    </tr>
    <tr >
        <td  height="29"  ><input type="radio" name="userID" value="1"></td>
        <td  height="29"  >Admin</td>
        <td  height="29"  >CG0000</td>
    </tr>          
    <tr>
        <td  height="29"  ><input type="radio" name="userID" value="2">  </td>
        <td  height="29"  >ab</td>
        <td  height="29"  >001</td>
    </tr>      
    <tr  onClick="selectLine(this);" >
        <td  height="29"  ><input type="radio" name="userID" value="3">  </td>
        <td  height="29"  >cc</td>
        <td  height="29"  >002</td>
    </tr>      
    <tr>
        <td  height="29"  ><input type="radio" name="userID" value="4">  </td>
        <td  height="29"  >dd</td>
        <td  height="29"  >008</td>
    </tr>
    </table>
    </form>
    </body>
    </html>