您的位置：首页 > Web前端 > JavaScript

js动态创建多个input框带删除按钮

2015-07-27 17:14 597 查看

<span style="font-size:24px;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">

function addInput(){
var propstr = "高度:180cm|高度:180cm|高度:180cm|高度:180cm|高度:180cm|高度:180cm|高度:180cm";
var status = "1";

var ary = propstr.split("|");
var content = "";
for(i=0;i<ary.length;i++){
var obj = document.getElementById("add");
var inputFile = document.createElement("input");

var inputId = "input_"+i;
var deleteId = "delete_"+i;

inputFile.setAttribute("type","text");
inputFile.setAttribute("name","prop");
inputFile.setAttribute("value",ary[i]);
inputFile.setAttribute("id",inputId);
//查看状态时设置input框只读
if("0"==status){
inputFile.readOnly = true;
var p = document.createElement("p");
obj.appendChild(inputFile);
obj.appendChild(p);
}else if("1"==status){
var del = document.createElement("input");
del.setAttribute("type","button");
del.setAttribute("value","删除");
del.setAttribute("id",deleteId);

var p = document.createElement("p");

obj.appendChild(inputFile);
obj.appendChild(del);
obj.appendChild(p);

del.onclick = function(){  //绑定事件，传递当前对象
deleteInput(this);
}
}
}
}

function deleteInput(obj) {
var id = obj.id;
var count = id.charAt(id.length - 1);
var deleteObj = document.getElementById(id);
var inputObj = document.getElementById("input_"+count);
var parentObj = document.getElementById("add");
parentObj.removeChild(deleteObj);
parentObj.removeChild(inputObj);
}
</script>
<body onload="addInput();">
<div id="add"></div>
</body>
</html></span>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航