写代码,第一行input框右边有新增按钮,点击新增按钮后,在他上面新增一行并且右边带删除按钮,此时最后一行有新增和删除按钮。点击最后一行删除按钮删除最后一行,此时第一行右边有新增按钮
时间: 2024-01-13 10:04:00 浏览: 31
好的,下面是一个简单的实现示例,使用 HTML、CSS 和 JavaScript 实现:
HTML 代码:
```html
<div id="container">
<div class="row">
<input type="text">
<button class="add-btn">新增</button>
</div>
</div>
```
CSS 代码:
```css
.row {
display: flex;
align-items: center;
}
input {
margin-right: 10px;
}
button {
margin-left: 10px;
}
```
JavaScript 代码:
```javascript
const container = document.getElementById("container");
const addBtns = container.querySelectorAll(".add-btn");
// 给每个新增按钮添加点击事件
addBtns.forEach((addBtn) => {
addBtn.addEventListener("click", () => {
// 在当前行上方插入新行
const newRow = document.createElement("div");
newRow.className = "row";
newRow.innerHTML = `
<input type="text">
<button class="delete-btn">删除</button>
<button class="add-btn">新增</button>
`;
container.insertBefore(newRow, addBtn.parentNode);
// 给新行的删除按钮添加点击事件
const deleteBtn = newRow.querySelector(".delete-btn");
deleteBtn.addEventListener("click", () => {
// 删除当前行
container.removeChild(newRow);
// 如果只剩下第一行,隐藏删除按钮
if (container.children.length === 1) {
const deleteBtn = container.querySelector(".delete-btn");
deleteBtn.style.display = "none";
}
});
// 如果当前行是最后一行,给当前行的新增按钮隐藏
if (addBtn === addBtns[addBtns.length - 1]) {
addBtn.style.display = "none";
}
});
});
```
这段代码实现了在第一行的右侧添加一个新增按钮,点击新增按钮后,在第一行的上方插入一行新的输入框和两个按钮,新行的右侧分别有一个删除按钮和一个新增按钮。如果当前行是最后一行,则隐藏当前行的新增按钮。如果删除了最后一行,第一行的右侧将重新显示新增按钮。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
</style>
</head>
<body>
<button onclick="addRow()">新增一行</button>
<button onclick="addColumn()">添加一列</button>
<button onclick="deleteRow()">删除行</button>
<button onclick="deleteColumn()">删除列</button>
<button onclick="changeSize()">调整大小</button>
<input type="text" oninput="filterTable(0)" placeholder="工艺膜层">
var table = document.getElementById("myTable");
var imageColumnIndices = [8, 9, 10,11,12,13]; // 指定要添加图片按钮的列索引数组
function addRow() {
var newRow = table.insertRow();
var cellsCount = table.rows[0].cells.length;
for (var i = 0; i < cellsCount; i++) {
var newCell = newRow.insertCell();
newCell.contentEditable = true;
if (imageColumnIndices.includes(i)) {
var newInput = document.createElement("input");
newInput.type = "file";
newInput.onchange = function() {
previewImage(this);
};
newInput.onclick = function() {
showPopup(this.src);
};
newCell.appendChild(newInput);
// 点击事件监听器,点击图片按钮时弹出放大图片的弹出窗口
newInput.onclick = function () {
showPopup(this.src);
};
}else {
newCell.innerHTML = "新单元格"; // 将空余按钮的单元格内容设置为默认值
}
}
}
function addColumn() {
var cellsCount = table.rows[0].cells.length;
for (var i = 0; i < table.rows.length; i++) {
var newCell = table.rows[i].insertCell();
newCell.contentEditable = true;
newCell.innerHTML = "新单元格";
}
}我需要指定某一列的列宽需要怎么设置
<legend class="field_title"> 增加行 </legend> 操作 提单号/运单号 一程日期 二程日期 预计到货日期 海船公司 放箱日期 放箱单上传 <input type="button" name="comment" value="删除"> <input type="text" name="comment"> <input type="date" name="date1"> <input type="date" name="date2"> <input type="date" name="date3"> <input type="text" name="commen1t"> <input type="date" name="date4"> <input type="file" name="attachment"> 新增和删除
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<legend class="field_title"> 增加行 </legend> 操作 提单号/运单号 一程日期 二程日期 预计到货日期 海船公司 放箱日期 放箱单上传 <input type="button" name="comment" value="删除"> <input type="text" name="comment"> <input type="date" name="date1"> <input type="date" name="date2"> <input type="date" name="date3"> <input type="text" name="commen1t"> <input type="date" name="date4"> <input type="file" name="attachment"> 新增和删除
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)