jquery 使用append增加行,每行3个input,input并赋值,每行后面加一个删除按钮,
时间: 2024-05-02 18:21:35 浏览: 90
以下是一个示例代码:
```
$(document).ready(function() {
// 添加行的点击事件
$("#add-row").click(function() {
var row = $("<div class='row'></div>");
// 添加3个input
for (var i = 0; i < 3; i++) {
var input = $("<input type='text' class='input' />");
// 给input赋值
input.val("Input " + (i+1));
row.append(input);
}
// 添加删除按钮
var deleteBtn = $("<button class='delete-btn'>Delete</button>");
row.append(deleteBtn);
// 将行添加到容器中
$("#container").append(row);
});
// 删除按钮的点击事件
$(document).on("click", ".delete-btn", function() {
$(this).parent().remove();
});
});
```
HTML结构:
```
<div id="container"></div>
<button id="add-row">Add Row</button>
```
CSS样式:
```
.row {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.input {
width: 100px;
margin-right: 10px;
}
.delete-btn {
margin-left: 10px;
}
```
使用jQuery的`append()`方法来添加行和元素,使用`val()`方法给input赋值,使用事件委托来绑定删除按钮的点击事件。同时,添加了一些基本的CSS样式来布局和美化界面。
阅读全文