javascript 动态添加删除控件

javascript 动态添加删除控件

<! 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 >