动态添加删除控件

最新推荐文章于 2018-05-22 15:31:38 发布

xingmyworld

最新推荐文章于 2018-05-22 15:31:38 发布

阅读量590

点赞数 1

分类专栏： net js 文章标签： border button generator input function html

本文链接：https://blog.csdn.net/xingmyworld/article/details/8032855

版权

net 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

<!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" οnclick="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" οnclick=""/>
   </td>
</tr>
</table>
<script language="javascript">AddRow()</script>
</form>
</BODY>
</HTML>

xingmyworld

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态添加删除控件

New Document var i = 0,j = 0; //行号与列号var oNewRow ; //定义插入行对象var oNewCell1,oNewCell2; //定义插入列对象//添加条件行function AddRow(){i = document.all.MyTable.rows.length;
复制链接

扫一扫

专栏目录