关于JS动态添加删除表格行的问题 请各位多多帮忙
这是我从网上找的代码，然后自己改了一些：
<script language= "javascript ">
function get_Element(the_ele,the_tag){
the_tag = the_tag.toLowerCase();
if(the_ele.tagName.toLowerCase()==the_tag)
return the_ele;
while(the_ele=the_ele.offsetParent){
if(the_ele.tagName.toLowerCase()==the_tag)
return the_ele;
}
return(null);
}
function add_Row(the_table) {
var the_row,the_cell;
var cur_rows=the_table.rows.length;
the_row=cur_rows==null?-1:(cur_rows);
var i=the_row-1;
var newrow=the_table.insertRow(i);//得到插入位置
the_cell=newrow.insertCell(0);
the_cell.innerHTML= " <center > 收件人 "+i;
the_cell=newrow.insertCell(1);
the_cell.innerHTML= " <center > <input name=A "+i+ " type=text size=13> ";
the_cell=newrow.insertCell(2);
the_cell.innerHTML= " <center > <INPUT type=button value=删除 onclick=del_row(myTable)> ";
}
function del_row(the_table){
var the_cell;
the_cell=get_Element(event.srcElement, "td ");
var index=the_cell.parentElement.rowIndex;
if(the_cell==null) return;
if(the_table.rows.length==1) return;
the_table.deleteRow(index);
var cell1= ' ';
var cell2= ' ';
for(var i=1;i <document.getElementById( 'myTable ').rows.length-2;i++)
{
try
{
cell1=document.getElementById( 'myTable ').rows[i].cells[0];
cell2=document.getElementById( 'myTable ').rows[i+1].cells[0];
if(parseInt(cell2.innerText)!=(parseInt(cell1.innerText)+1))
{
cell2.innerText=(parseInt(cell1.innerText)+1);
cell2.style.textAlign= 'center ';
}
}
catch(e)
{
alert(e.discription);
}
}
}
</script>
<body>
<form method= "post " name= "form1 " action= "jsp.jsp " onSubmit= " ">
<table id= "myTable " width= "100% " border= "1 " cellpadding= "4 " cellspacing= "1 " >
<tr class= "TdContent ">
<td > <div align= "center "> 序号 </div> </td>
<td > <div align= "center "> A </div> </td>
<td > <div align= "center "> B </div> </td>
</tr>
<tr class= "TdContent ">
<td> <div align= "center "> 1 </div> </td>
<td> <div align= "center ">
<input name= "A " type= "text " size= "13 " >
</div> </td>
<td> <div align= "center ">
<input name= "B " type= "text " size= "13 " >
</div> </td>
</tr>
<tr class= "TdContent ">
<td colspan= "3 " align= "center "> <input type= "button " value= "添加一行 " class= "ButtonStyle " onClick= "add_Row(myTable) "> </td>
</tr>
</table>
<input type= "submit " name= "Submit " value= "发送 ">
</form>
</body>
现在我可以添加也可以删除行，但是有一个问题，比如说我添加完3个（ 1 收件人2 收件人3 ），我删除其中一个，前面的序号就都会变成（ 1 2 ）而不是（1 收件人2 ），其实我是想做成（ 收件人1 收件人2 收件人3 ）的 ，但是如果把table里的序号下的1改成收件人1，它会出错。请问这个怎么改？！
其实这个不改也行，关键还有一个问题是我现在要在另一个页面里获值，添加多少我就需要在另一个页面里获取多少值，比如说：我现在添加3个，删除第2个后，前面的序列号是变成（ 1 2 ）里，但是序号2对应的文本框的name却是A3，这个怎么改啊?我想在删除2的时候，不仅仅是把3的序号变成2，还要把3所对应的文本框的name也变成A2，这个怎么做？
在JS方面我很菜，请各位多多帮忙，谢谢了 ！
[解决办法]
<script language= "javascript ">
function get_Element(the_ele,the_tag){
the_tag = the_tag.toLowerCase();
if(the_ele.tagName.toLowerCase()==the_tag)
return the_ele;
while(the_ele=the_ele.offsetParent){
if(the_ele.tagName.toLowerCase()==the_tag)
return the_ele;
}
return(null);
}
function add_Row(the_table) {
var the_row,the_cell;
var cur_rows=the_table.rows.length;
the_row=cur_rows==null?-1:(cur_rows);
var i=the_row-1;
var newrow=the_table.insertRow(i);//得到插入位置
the_cell=newrow.insertCell(0);
the_cell.innerHTML= " <center > 收件人 "+i;
the_cell=newrow.insertCell(1);
the_cell.innerHTML= " <center > <input name=A "+i+ " type=text size=13> ";
the_cell=newrow.insertCell(2);
the_cell.innerHTML= " <center > <INPUT type=button value=删除 onclick=del_row(myTable)> ";
alert(the_table.rows.length);
}
function del_row(the_table){
var the_cell;
the_cell=get_Element(event.srcElement, "td ");
var index=the_cell.parentElement.rowIndex;
if(the_cell==null) return;
if(the_table.rows.length==1) return;
the_table.deleteRow(index);
var cell1= ' ';
var cell2= ' ';
for(var i=1;i <document.getElementById( 'myTable ').rows.length-2;i++)
{
try
{
cell1=document.getElementById( 'myTable ').rows[i].cells[0];
cell2=document.getElementById( 'myTable ').rows[i+1].cells[0];
cell22=document.getElementById( 'myTable ').rows[i+1].cells[1];
if(parseInt(cell2.innerText)!=(parseInt(cell1.innerText)+1))
{
s=cell1.innerText.replace( "收件人 ", " ");
cell2.innerText= "收件人 "+(parseInt(s-0)+1);
cell2.style.textAlign= 'center ';
cell22.innerHTML= " <center > <input name=A "+(i+1)+ " type=text size=13> ";
alert(cell22.innerHTML);
}
}
catch(e)
{
alert(e.discription);
}
}
}
</script>
<body>
<form method= "post " name= "form1 " action= "jsp.jsp " onSubmit= " ">
<table id= "myTable " width= "100% " border= "1 " cellpadding= "4 " cellspacing= "1 " >
<tr class= "TdContent ">
<td > <div align= "center "> 序号 </div> </td>
<td > <div align= "center "> A </div> </td>
<td > <div align= "center "> B </div> </td>
</tr>
<tr class= "TdContent ">
<td> <div align= "center "> 1 </div> </td>
<td> <div align= "center ">
<input name= "A " type= "text " size= "13 " >
</div> </td>
<td> <div align= "center ">
<input name= "B " type= "text " size= "13 " >
</div> </td>
</tr>
<tr class= "TdContent ">
<td colspan= "3 " align= "center "> <input type= "button " value= "添加一行 " class= "ButtonStyle " onClick= "add_Row(myTable) "> </td>
</tr>
</table>
<input type= "submit " name= "Submit " value= "发送 ">
</form>
</body>
[解决办法]
你需要在插入和删除完某行以后再来取得这个值
或者直接在提交之前来获得这个表格的行数
