高分求助，想用js实现一个添加按钮，点一下增加一个div，里面的id顺序增加，求助！ 100
div框如下：<divid="d1"><inputid="input1"></div>想有一个按钮，点一下顺序增加一个div，比如点一下增加如下div：<divid="d...
div框如下：
<div id="d1"><input id="input1"></div>
想有一个按钮，点一下顺序增加一个div，比如点一下增加如下div：
<div id="d2"><input id="input2"></div>
再点一下在增加一个
<div id="d3"><input id="input3"></div>
还需要限制增加的总数，比如10个，最好每个div旁边还有删除此div的按钮
用js实现，求助！ 展开
<div id="d1"><input id="input1"></div>
想有一个按钮，点一下顺序增加一个div，比如点一下增加如下div：
<div id="d2"><input id="input2"></div>
再点一下在增加一个
<div id="d3"><input id="input3"></div>
还需要限制增加的总数，比如10个，最好每个div旁边还有删除此div的按钮
用js实现，求助！ 展开
展开全部
<div class="container">
<div id="d1"><input type="text" id="input1"></div>
</div>
<div id="">
<input type="button" class="add" value="add">
<input type="button" class="del" value="del">
</div>
$(".add").click(function() {
var len = $(".container").children().length + 1;
var divId = "d" + len;
var inputId = "input" + len;
if (len >= 11) {
alert("已经达到十个了");
return;
};
$(".container").append("<div id=" + divId + "><input type='text' id=" + inputId + "></div>");
});
$(".del").click(function() {
var len = $(".container").children().length;
$(".container").children().eq(len-1).remove();
})以上是我尝试用jquery写出来的，如果你的页面引入了jQuery，那么这么写代码相对简介了些。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
var maxid = 10;
var es = [];
function add() {
if (es.length > maxid) {
alert("div数量已达到" + maxid + "个！"); return;
}
var o = document.createElement("div");
var oin = document.createElement("input");
oin.setAttribute("type", "button");
oin.value = "删除";
oin.onclick = function () {
var p = this.parentElement;
p.parentElement.removeChild(p);
for (var i = 0; i < es.length; i++) {
if (p == es[i]) {
es.splice(i, 1);
setID();
return;
}
}
}
o.appendChild(oin);
document.body.appendChild(o);
es.push(o);
setID();
function setID() {
for (var i = 0; i < es.length; i++) {
es[i].id = "d" + i;
es[i].childNodes[0].id = "input" + i;
}
}
}
</script>
<input type="button" value="添加" onclick="add()" />
</body>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
var maxid = 10;
var es = [];
function add() {
if (es.length > maxid) {
alert("div数量已达到" + maxid + "个！"); return;
}
var o = document.createElement("div");
var oin = document.createElement("input");
oin.setAttribute("type", "button");
oin.value = "删除";
oin.onclick = function () {
var p = this.parentElement;
p.parentElement.removeChild(p);
for (var i = 0; i < es.length; i++) {
if (p == es[i]) {
es.splice(i, 1);
setID();
return;
}
}
}
o.appendChild(oin);
document.body.appendChild(o);
es.push(o);
setID();
function setID() {
for (var i = 0; i < es.length; i++) {
es[i].id = "d" + i;
es[i].childNodes[0].id = "input" + i;
}
}
}
</script>
<input type="button" value="添加" onclick="add()" />
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
