好的，根据您的要求，我给您提供一个示例代码。这个示例代码使用了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 new
Input = document.createElement("
input");
new
Input.type = "text";
new
Input.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(new
Input);
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(new
Input);
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 next
Input = document.createElement("
input");
next
Input.type = "text";
next
Input.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(next
Input);
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(next
Input);
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 nextNext
Input = document.createElement("
input");
nextNext
Input.type = "text";
nextNext
Input.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(nextNext
Input);
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(nextNext
Input);
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]);
}
});
}
```
这个代码会动态地生成表格，并且可以动态地添加和
删除行。第一行只有一个新增
按钮，点击新增
按钮会在下面添加一行，并且这一行只有一个
删除按钮。最后一行不仅有新增
按钮，还有
删除按钮。如果
删除的是最后一行，那么会在上一行的右边添加一个新增
按钮。
1051
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
