如何用js动态给from页面增加input

如何用js动态给from页面增加input,第1张

这样亩早弊:

<body>

<form id='form'> --定义form

</form>

<script>

var input = 睁高document.createElement('input')  //创建input节点

input.setAttribute('type', 'text')  //定义类型是文本输入

document.getElementById('form').appendChild(input ) //添加到form中显示

</script>

</body>

扩展资料:

注意事项

一、form属性可以使input标签不再form表单内时也属于form表单中的一部分

<form action="xxx" id="forms">

<input type="submit" value="提交">

</form>

<input type="text" form="forms" name="names">

<!-- IE中不支持这个属性 -->

二、JavaScript提交表单时,迅族可以在input标签内添加required属性,在内容为空的时候阻止表单提交。

使用required属性时添加oninvalid属性可以自定义提示文字

<form action="xxx" method="post">

<input type="text" name="fname" required oninvalid="setCustomValidity('不能为空')">

<input type="submit" value="提交">

</form>

<!-- IE9及更早版本不支持 -->

省市联察键动里面,市表单里面必须有对应的省字段败激巧name或者ID,通过选择的selec 市 from table where ID=省查询,然后add动态添加。

第一种模板才是通常显示的模板铅局,存取也没有什么不同,取对应位置的数据组,循环insert。

<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=1i<=ni++){

//设置标签值

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>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11984004.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存