动态添加删除控件

来源:互联网 发布:apache调试选项 编辑:程序博客网 时间:2024/04/19 15:14
<!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>