写代码,第一行是单行input框右边有新增按钮,连续点击新增按钮后,在他上面可以连续新增一行并且右边只有删除按钮,当是最后一行时有新增和删除按钮。当是第一行只有新增按钮,点击删除按钮删除当前一行
时间: 2023-12-19 07:05:48 浏览: 65
好的,根据您的要求,我给您提供一个示例代码。这个示例代码使用了HTML、CSS和JavaScript,可以实现您所需要的功能。以下是代码:
HTML部分:
```
<div id="container">
<div class="input-row">
<input type="text" class="input-box">
<button class="add-btn">新增</button>
</div>
</div>
```
CSS部分:
```
.input-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.input-box {
flex: 1;
margin-right: 10px;
}
.add-btn {
width: 60px;
}
.del-btn {
width: 60px;
}
```
JavaScript部分:
```
var container = document.getElementById("container");
var addBtns = container.getElementsByClassName("add-btn");
for (var i = 0; i < addBtns.length; i++) {
addBtns[i].addEventListener("click", function() {
var newRow = document.createElement("div");
newRow.className = "input-row";
var newInput = document.createElement("input");
newInput.type = "text";
newInput.className = "input-box";
var newAddBtn = document.createElement("button");
newAddBtn.className = "add-btn";
newAddBtn.innerText = "新增";
var newDelBtn = document.createElement("button");
newDelBtn.className = "del-btn";
newDelBtn.innerText = "删除";
newRow.appendChild(newInput);
newRow.appendChild(newDelBtn);
if (this.parentNode.nextSibling) {
container.insertBefore(newRow, this.parentNode.nextSibling);
} else {
container.appendChild(newRow);
}
this.parentNode.removeChild(this);
newRow.appendChild(newAddBtn);
newDelBtn.addEventListener("click", function() {
container.removeChild(newRow);
if (container.children.length == 1) {
container.children[0].appendChild(addBtns[0]);
}
});
newAddBtn.addEventListener("click", function() {
newRow.removeChild(newAddBtn);
newRow.appendChild(newInput);
newRow.appendChild(newDelBtn);
var addBtn = document.createElement("button");
addBtn.className = "add-btn";
addBtn.innerText = "新增";
newRow.appendChild(addBtn);
addBtn.addEventListener("click", function() {
var nextRow = document.createElement("div");
nextRow.className = "input-row";
var nextInput = document.createElement("input");
nextInput.type = "text";
nextInput.className = "input-box";
var nextAddBtn = document.createElement("button");
nextAddBtn.className = "add-btn";
nextAddBtn.innerText = "新增";
var nextDelBtn = document.createElement("button");
nextDelBtn.className = "del-btn";
nextDelBtn.innerText = "删除";
nextRow.appendChild(nextInput);
nextRow.appendChild(nextDelBtn);
container.insertBefore(nextRow, newRow.nextSibling);
newRow.removeChild(addBtn);
nextRow.appendChild(nextAddBtn);
nextDelBtn.addEventListener("click", function() {
container.removeChild(nextRow);
if (container.children.length == 1) {
container.children[0].appendChild(addBtns[0]);
}
});
nextAddBtn.addEventListener("click", function() {
nextRow.removeChild(nextAddBtn);
nextRow.appendChild(nextInput);
nextRow.appendChild(nextDelBtn);
var addBtn = document.createElement("button");
addBtn.className = "add-btn";
addBtn.innerText = "新增";
nextRow.appendChild(addBtn);
addBtn.addEventListener("click", function() {
var nextNextRow = document.createElement("div");
nextNextRow.className = "input-row";
var nextNextInput = document.createElement("input");
nextNextInput.type = "text";
nextNextInput.className = "input-box";
var nextNextAddBtn = document.createElement("button");
nextNextAddBtn.className = "add-btn";
nextNextAddBtn.innerText = "新增";
var nextNextDelBtn = document.createElement("button");
nextNextDelBtn.className = "del-btn";
nextNextDelBtn.innerText = "删除";
nextNextRow.appendChild(nextNextInput);
nextNextRow.appendChild(nextNextDelBtn);
container.insertBefore(nextNextRow, nextRow.nextSibling);
nextRow.removeChild(addBtn);
nextNextRow.appendChild(nextNextAddBtn);
nextNextDelBtn.addEventListener("click", function() {
container.removeChild(nextNextRow);
if (container.children.length == 1) {
container.children[0].appendChild(addBtns[0]);
}
});
nextNextAddBtn.addEventListener("click", function() {
nextNextRow.removeChild(nextNextAddBtn);
nextNextRow.appendChild(nextNextInput);
nextNextRow.appendChild(nextNextDelBtn);
var addBtn = document.createElement("button");
addBtn.className = "add-btn";
addBtn.innerText = "新增";
nextNextRow.appendChild(addBtn);
addBtn.addEventListener("click", function() {
alert("已到达最大行数");
});
});
});
});
});
});
});
}
var delBtns = container.getElementsByClassName("del-btn");
for (var i = 0; i < delBtns.length; i++) {
delBtns[i].addEventListener("click", function() {
container.removeChild(this.parentNode);
if (container.children.length == 1) {
container.children[0].appendChild(addBtns[0]);
}
});
}
```
这个代码会动态地生成表格,并且可以动态地添加和删除行。第一行只有一个新增按钮,点击新增按钮会在下面添加一行,并且这一行只有一个删除按钮。最后一行不仅有新增按钮,还有删除按钮。如果删除的是最后一行,那么会在上一行的右边添加一个新增按钮。
阅读全文