javascript实现动态添加删除表格行

本文介绍了一种使用JavaScript实现动态生成表格的方法,包括如何插入新行、删除行以及更新表格中数据的逻辑。同时,文章还讨论了如何在删除行时自动调整表格的行数和数据的连续性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<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=30>";
the_cell=newrow.insertCell(2);
the_cell.innerHTML="<center ><INPUT type=button value=删除 onclick=del_row(myTable)>";
//alert(the_table.rows.length);
document.getElementById("cname").value=myTable.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='';
document.getElementById("cname").value=document.getElementById("cname").value-1;
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=30>";
//alert(cell22.innerHTML);

}
}
catch(e)
{
alert(e.discription);
}

}
}
</script>

<form name="form1" method="post" >
<table width="60%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#BBB3AA" id="myTable" >
<tr class="TdContent">
<td bgcolor="#FFFFFF" ><div align="center">收件人</div></td>
<td bgcolor="#FFFFFF" ><div align="center">接收人
<input type="hidden" name="cname" id="cname">
</div></td>
<td bgcolor="#FFFFFF" ><div align="center">操作</div></td>
</tr>
<tr class="TdContent">
<td bgcolor="#FFFFFF"><div align="center">1</div></td>
<td align="center" bgcolor="#FFFFFF"><input name="A1" type="text" id="A1" size="30" >
</td>
<td bgcolor="#FFFFFF"><div align="center">
<input name="button" type="button" class="ButtonStyle" onClick="add_Row(myTable)" value="添加">
</div></td>
</tr>
<tr class="TdContent">
<td colspan="3" align="center" bgcolor="#FFFFFF"> </td>
</tr>
</table>
</form>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值