<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- JavaScript 实现动态增加、删除表单域 -->
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
var i=0
function fireAdd()
{
var temp = document.getElementById("third");
temp.insertRow(temp.rows.length);
temp.rows.item(temp.rows.length -1).insertCell(0);
var xx=temp.rows.length -1 ;//-1
var sHTML
sHTML='<TABLE border=\"1\" style=\"border-collapse: collapse\" bordercolor=\"#111111\"width=\"100%\">' +
'<TR>' +
'<TD align=\"center\" colspan=\"4\">个人信息 (' + i++ +')</TR>' +
'<TR>' +
'<TD align=\"right\">姓名:</TD>' +
'<TD> <INPUT TYPE=\"text\" NAME=\"tName\"></TD>' +
'<TD align=\"right\">性别:</TD>' +
'<TD> <INPUT TYPE=\"radio\" checked NAME=\"rSex\">先生 <INPUT TYPE=\"radio\" NAME=\"rSex\">女士</TD>' +
'</TR>' +
'<TR>' +
'<TD align=\"right\">职务:</TD>' +
'<TD> <SELECT NAME=\"\">' +
'<option value=\"其它\"> 其它 </option>' +
'<option value=\"经理\"> 经理 </option>' +
'</SELECT>' +
'</TD>' +
'<TD align=\"right\">邮件:</TD>' +
'<TD> <INPUT TYPE=\"text\" NAME=\"tMail\"></TD>' +
'</TR>' +
'<TR>' +
'<TD align=\"center\" colspan=\"4\"><input type=\"button\" value=\" 删除 \" onclick=\"Delete(this);\">'
'</TR>' +
'</TABLE>';
temp.rows.item(temp.rows.length-1).cells.item(0).innerHTML=sHTML;
temp.rows.item(temp.rows.length-1).cells.item(0).childNodes.item(0).rows.item(3).cells.item(0).childNodes.item(0).text=xx;
}
function Delete(x)
{
var temp = document.getElementById("third");
temp.deleteRow(x.text.valueOf())
for (var j=0;j<temp.rows.length;j++)
{
temp.rows.item(j).cells.item(0).childNodes.item(0).rows.item(3).cells.item(0).childNodes.item(0).text=j;
}
}
</SCRIPT>
</HEAD>
<BODY>
<table border="1" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td align="center">
<INPUT TYPE="button" value=" 添加 " onclick="fireAdd()">
</td>
</tr>
<tr>
<td align="center">
<TABLE align=center border=0 width="100%" height="100%" id="second">
<TR>
<TD width="100%" height="300" align="center">
<TABLE width="100%" id="third">
</TABLE>
</TD>
</TR>
</TABLE>
</td>
</tr>
</table>
</BODY>
</HTML>
分享到：
相关推荐
添加行代码添加行代码添加行代码添加行代码添加行代码添加行代码添加行代码添加行代码添加行代码添加行代码
动态创建iframe,并动态添加js代码动态创建iframe,并动态添加js代码
js下为表格内部动态添加行的代码.docx
实现在table表格的指定行后增加新行 删除新行 并利用收回及展开处理了由于动态增加行而占用大量页面空间的问题 代码有注释 易懂 希望能对大家有所帮助
利用javascript动态添加行(原创)，附有示例代码
* 1、<script language="javascript" src="js/addContentRow.js"> * 2、 * <!-- 附件部分 --> * * <tr></tr> * * * <a href="javascript:addpicrow();">增加 * <a href="javascript:...
jquery表格动态添加删除行代码是一款基于jquery实现的表格里面点击按钮后可进行自动添加删除行功能代码。
网页表格用js动态添加一行代码，javascript应用
动态插入、添加删除表格行的JS代码，网页表格操作必要的知识
通过js实现动态添加行，前台实现代码在我的博客中，这是add.js的源码
你还在为PDF阅读器没有书签感到烦恼吗 PDF 添加书签 javascript 源代码 很好很强大
本文代码主要实现了javascript如何操作table并动态添加行的方法
js控制页面动态增加行，动态删除行
本文档把js加载做成vue组件，便于在其他模块引用，符合vue整体思路，供大家参考借鉴
js 后台动态添加窗口代码,欢迎下载使用js 后台动态添加窗口代码,欢迎下载使用
JS删除或者添加一行的代码，可以直接测试。
博文链接：https://e3002.iteye.com/blog/40797
实现购物车，注册账号，修改密码，添加等JS效果，
自动增加删除表格行代码（纯JS）自动增加删除表格行代码（纯JS）自动增加删除表格行代码（纯JS）
asp.net后台代码动态引用添加JS和css文件