js实现增加form表单中的输入域

Posted 2023-04-25

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现增加form表单中的输入域相关的知识，希望对你有一定的参考价值。

现在有个form表单，里面只有一个text输入域和一个submit按钮。我想用JS实现当点击某个按钮或超链接时，在这个FORM表单中的text输入框后新增一个text输入框，每点击一次，就在后面增加一个输入框。并且要保证如果前面的输入框里有输入内容，点击增加输入域后，前面输入的内容不会被清空。

参考技术A <html>
<head>
<script language="javascript">
function add()
//取得表格
var table = document.getElementById("table1");
//取得行数;
var num = table.rows.length;
//增加一行
var newrow1 = table.insertRow(num-1);
var cell1 = newrow1.insertCell();
var cell2 = newrow1.insertCell();
var cell3 = newrow1.insertCell();
var cell4 = newrow1.insertCell();
//增加行元素
var inputcell2 = document.createElement("<input size='32' name=''>");
cell2.appendChild(inputcell2);
var inputcell4_1 = document.createElement("<input size='32' name=''>");
var inputcell4_2 = document.createElement("<input type='button' value='删除元素'onClick='del(this);'/>");
cell4.appendChild(inputcell4_1);
cell4.appendChild(inputcell4_2);
//刷新标签显示
frash();

function del(obj)
//取得按钮所在行
var i = obj.parentNode.parentNode.rowIndex;
var tab = document.getElementById("table1");
//删除按钮所在行
tab.deleteRow(i-1);
frash();

function frash()
var table = document.getElementById("table1");
var num = table.rows.length;
//计算动态元素个数
var n = num-2;
for(i=1;i<=n;i++)
//设置标签值
table.rows[i].cells[0].innerText="元素"+i+"属性A";
//设置属性值
table.rows[i].cells[1].childNodes[0].setAttribute("name","ysa"+i);
table.rows[i].cells[2].innerText="元素"+i+"属性B";
table.rows[i].cells[3].childNodes[0].setAttribute("name","ysb"+i);

</script>
</head>
<body>
<table id="table1" width="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>标签1</td>
<td><input name="a"></td>
<td>标签2</td>
<td><input name="b"></td>
</tr>
<tr>
<td colspan="4" align="center"><a href="#" onclick="add();">增加元素</a></td>
</tr>
</table>
</body>
</html>

参考资料：http://hi.baidu.com/fourjavaman/blog/item/5de0580876420f8bd0581b04.html

本回答被提问者采纳