菜鸟求助，关于javascript对表格进行操作？

<html> 
<head> 
<script> 
  function addRow() 
  {       //添加行 
    var tableObj = document.getElementById("mainTb");  //获取表格相关属性 
    //设置行、名称、单位、按钮等相关变量 
    var newRowObj = tableObj.insertRow(tableObj.rows.length); 
/* var newNameCell = newRowObj.insertCell(newRowObj.cells.[0]; 
    var newCompanyCell = newRowObj.insertCell(newRowObj.cells[1]); 
    var newButtonCell = newRowObj.insertCell(newRowObj.cells.[2]); 
===>>>>>
*/
    var newNameCell = newRowObj.insertCell(0); 
    var newCompanyCell = newRowObj.insertCell(1); 
    var newButtonCell = newRowObj.insertCell(2); 
    //添加“姓名”表元 
    newNameCell.innerHTML = document.getElementById("newName").value; 
    //添加“单位”表元 
    newCompanyCell.innerHTML = document.getElementById("newCompany").value; 
    //添加“删除”表元 
    newButtonCell.innerHTML = ' <input type="button" value="删除" onclick="deleteRow('+(tableObj.rows.length-1)+')">'; 
  } 
  function deleteRow(index) {  //删除行 
var tableObj = document.getElementById("mainTb");  //获取表格相关属性 
tableObj.deleteRow(index);  //删除指定行 
  } 
</script> 
</head> 
<body  style="margin:40px"> 
<table id="mainTb" border="1"> 
   <tr> <th width="80">姓名 </th> <th width="250">单位 </th> </tr> 
   <tr id="row0"> <td>张三 </td> <td>北京中软科技公司 </td> 
<td> <input type="button" value="删除" onclick="deleteRow(0)"> </td> </tr> 
   <tr id="row1"> <td>李四 </td> <td>上海南嘉食品公司 </td> 
<td> <input type="button" value="删除"onclick="deleteRow(1)"> </td> </tr> 
</table> <br> 
<div> 
<span id="new"> 
姓名： <input type="text" name="newName" id="newName"> <br> 
单位： <input type="text" id="newCompany">&nbsp; 
<input type="button" value="新增" onclick="addRow()"> 
</span> 
</div> 
</body> 
</html>

解决方案 »

  1.   

    不能写死，删除后index变了  function deleteRow(obj) {  
        index = obj.parentElement.parentElement.rowIndex;
        document.getElementById('mainTb').deleteRow(index);
      }
      

  2.   

    <html>
    <head>
    <script language="JavaScript"> 
      function deleteRow(obj) {  
        index = obj.parentElement.parentElement.rowIndex;
        document.getElementById('mainTb').deleteRow(index);
      }
      
      function addRow() 
      {      
        var tableObj = document.getElementById("mainTb"); 
        var newRowObj = tableObj.insertRow(tableObj.rows.length); 
        var newNameCell = newRowObj.insertCell(0); 
        var newCompanyCell = newRowObj.insertCell(1); 
        var newButtonCell = newRowObj.insertCell(2); 
        newNameCell.innerHTML = document.getElementById("newName").value; 
        newCompanyCell.innerHTML = document.getElementById("newCompany").value; 
        newButtonCell.innerHTML = ' <input type="button" value="删除" onclick="deleteRow(this)">'; 
      } 
      
    </script>
    </head>
    <body  style="margin:40px"><div>
    <table id="mainTb" border="1">
     <tr><th width="80">姓名</th><th width="250">单位 </th> </tr>
     <tr id="row0"> <td>张三</td><td>北京中软科技公司 </td>
    <td> <input type="button" value="删除" onclick="deleteRow(this)" id="Button1"> </td> </tr>
       <tr id="row1"> <td>李四 </td> <td>上海南嘉食品公司 </td>
    <td> <input type="button" value="删除"onclick="deleteRow(this)"> </td> </tr>
    </table> <br>
    <div>
    <span id="new">
    姓名： <input type="text" name="newName" id="newName"> <br>
    单位： <input type="text" id="newCompany">&nbsp;
    <input type="button" value="新增" onclick="addRow()">
    </span>
    </div>
    </body>
    </html>
      

  3.   

        var newRowObj = tableObj.insertRow(tableObj.rows.length);
        var newNameCell = newRowObj.insertCell(newRowObj.cells.[0]);
        var newCompanyCell = newRowObj.insertCell(newRowObj.cells[1]);
        var newButtonCell = newRowObj.insertCell(newRowObj.cells.[2]); 
    语法错误：红色部分删除，添加蓝色部分；
    逻辑错误：添加时，删除按钮被添加在了行首；删除时，第一行删除对应的是标题栏（这部分错误你自己查）
      

  4.   

    http://blog.csdn.net/ghostresur/archive/2008/05/12/2435789.aspx