如何利用js删除指定行

Question

<input name="l1" type="button" id="l1" onClick="add(tab);" value="增加一段" >
 <table width="540" border="1" id="tab">
 <td width="122" align="center">长度</td>
 <td width="90" align="center">显示内容</td>
 <td width="54" align="center">颜色</td>
 <td width="36" align="center">操作</td>  
 </table>
<SCRIPT LANGUAGE="JavaScript">
var i=0;
function add(obj) 
{var newrow=tabnum.insertRow();
 var newcell=newrow.insertCell(0);
 newcell.innerHTML="<td width=122><center>第"+(i+1)+"段长度</center></td>";
     
 newcell=newrow.insertCell(1);
 newcell.innerHTML="....";  newcell=newrow.insertCell(2);
 newcell.innerHTML="....";  newcell=newrow.insertCell(3);
 newcell.innerHTML="<td align='center'><input name='del' type='button' id='del'  onClick='delRow(this.parentElement.parentElement,i) ' value='删除'></td>"; 
i++;
}
function   delRow(src, rowIndex)
 {     
  src.parentElement.deleteRow(rowIndex); 
  i--;
 }  
</script>
为什么每次只是删除最后一行，而不是指定的那一行呢？

Answer 1

改成这样就可以了
newcell.innerHTML="<td align='center'><input name='del' type='button' id='del'  onClick='delRow(this.parentElement.parentElement,"+i+") ' value='删除'></td>"; 
主要是你传进的i为变量。

Answer 2

var n = i+1;
newcell.innerHTML="<td align='center'><input name='del' type='button' id='del'  onClick='delRow(this.parentElement.parentElement,"+n+") ' value='删除'></td>";

Answer 3

怎么实现他们同步呢？
function   delRow(src, rowIndex)
 {    
  src.parentElement.deleteRow(rowIndex); 
  i--;
 }  
我在这里执行了i--,但是我删除第二行后，还是显示这样：“第一段长度”，然后就是“第三段长度”了。而不是我想要的“第二段长度”。