您的位置：首页 > 其它

动态添加删除控件

2012-09-29 16:53 288 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<script language="javascript">
var i = 0,j = 0;     //行号与列号
var oNewRow ;    //定义插入行对象
var oNewCell1,oNewCell2;     //定义插入列对象

//添加条件行
function AddRow()
{
i = document.all.MyTable.rows.length;
oNewRow = document.all.MyTable.insertRow(i);
oNewRow.id = j;

//添加第一列
oNewCell1 = document.all.MyTable.rows[i].insertCell(0)
oNewCell1.innerHTML = "<input type='text' id='Value" + j + "'"+" size='14' value=\"\">";

//添加第二列
oNewCell2 = document.all.MyTable.rows[i].insertCell(1)
oNewCell2.innerHTML ="<input type=button name=Del" + j + " value='删除当前行'"+"onClick='DelCurrentRow(" + j + ");'>";
j++;
}

//删除行
function DelCurrentRow(j)
{
with(document.all.MyTable)
{
for (var i=0;i<rows.length;i++)
{
if (rows[i].id == j)
{
deleteRow(i);
}
}
}
}
</script>

<form method="post" action="">
<div style="margin-left:80px;color:red;font-weight:bold;"></div>
<div align="center" class="title-font">
动态添加HTML元素
</div>
<br>
<table style="border:0px;" cellpadding=0 cellspacing=0
align="center">
<tr>
<td style="border:0px;" width="340"><hr></td>
<td style="border:0px;"><input type=button value="添加" name"addFieldBT" onclick="AddRow();"/></td>
</tr>
</table>
<br><br>
<table style="border:0px;" cellpadding=0 cellspacing=0
align="center" class="TableBody" id="MyTable" border="0">
</table>
<br><br>
<table style="border:0px;" cellpadding=0 cellspacing=0
align="center">
<tr>
<td align="center" style="border:0px;">
<input type=button value="提交" name="searchBT" onclick=""/>
</td>
</tr>
</table>
<script language="javascript">AddRow()</script>
</form>
</BODY>
</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航