iview table增加一行减少一行_利用jquery给指定的table动态添加一行、删除一行
时间: 2023-08-26 08:03:34 浏览: 82
bootstrap table实现iview固定列的效果实例代码详解
利用 jQuery 给指定的 Table 动态添加一行、删除一行的示例代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iView Table Demo</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="addBtn">添加一行</button>
<table id="myTable" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td><button class="deleteBtn">删除</button></td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td><button class="deleteBtn">删除</button></td>
</tr>
</tbody>
</table>
<script>
// 添加一行
$('#addBtn').click(function () {
var newRow = '<tr><td>王五</td><td>25</td><td><button class="deleteBtn">删除</button></td></tr>';
$('#myTable tbody').append(newRow);
});
// 删除一行
$(document).on('click', '.deleteBtn', function () {
$(this).parents('tr').remove();
});
</script>
</body>
</html>
```
在上述代码中,我们先在页面中定义了一个 Table,并在其中设置了一个“添加一行”的按钮和两行数据。当点击这个按钮时,会在 Table 的 tbody 中添加一行新的数据。同时,我们还通过 jQuery 绑定了“删除”按钮的点击事件,使其能够删除所在的行。注意,这里使用了 jQuery 的`on`方法来绑定事件,因为“删除”按钮是动态生成的,不能直接使用`click`方法进行绑定。
阅读全文