DANCE WITH JAVA

开发出高质量的系统

常用链接

统计

积分与排名

好友之家

最新评论

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()
{
= 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>

posted on 2007-09-14 09:39 dreamstone 阅读(6443) 评论(1)  编辑  收藏 所属分类: 片段脚本语言javascript

评论

# re: javascript 动态添加删除控件 2008-06-02 09:37 `

`  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: