boostrap行内修改编辑(整行修改,统一提交)
时间: 2023-10-30 07:14:53 浏览: 44
可以使用 Bootstrap 的表单组件来实现行内编辑功能。具体实现步骤如下:
1. 使用 `form-inline` 类来创建一个行内表单组件。
2. 在表单组件中添加一个文本输入框,用于用户输入修改后的内容。
3. 添加一个 “编辑” 按钮,用于触发编辑状态。
4. 使用 JavaScript 监听 “编辑” 按钮的点击事件,并将当前行的内容赋值给文本输入框。
5. 当用户完成编辑后,点击 “保存” 按钮,将修改后的内容提交到后台。
以下是一个示例代码:
```html
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><span class="editable">John Doe</span></td>
<td><span class="editable">johndoe@example.com</span></td>
<td>
<button class="btn btn-primary edit-btn">Edit</button>
<button class="btn btn-success save-btn" style="display:none;">Save</button>
</td>
</tr>
<tr>
<td>2</td>
<td><span class="editable">Jane Doe</span></td>
<td><span class="editable">janedoe@example.com</span></td>
<td>
<button class="btn btn-primary edit-btn">Edit</button>
<button class="btn btn-success save-btn" style="display:none;">Save</button>
</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
// 绑定编辑按钮的点击事件
$('.edit-btn').click(function() {
var row = $(this).closest('tr');
var cells = row.find('.editable');
cells.each(function() {
var content = $(this).html();
var input = $('<input type="text" class="form-control">');
input.val(content);
$(this).html(input);
});
$(this).hide();
row.find('.save-btn').show();
});
// 绑定保存按钮的点击事件
$('.save-btn').click(function() {
var row = $(this).closest('tr');
var cells = row.find('.editable');
cells.each(function() {
var content = $(this).find('input').val();
$(this).html(content);
});
$(this).hide();
row.find('.edit-btn').show();
// TODO: 提交修改后的内容到后台
});
});
</script>
```
在上面的代码中,我们使用了 jQuery 来绑定按钮的点击事件,并在点击事件中完成了行内编辑和提交功能。你可以将代码复制到你的项目中,根据需要进行调整和修改。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)