bootstrap编辑回显案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Bootstrap Table Edit</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css"><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head><body><table id="data-table" class="table"><thead><tr><th>ID</th><th>Name</th><th>Email</th><th>Action</th></tr></thead><tbody><tr data-id="1" data-name="John" data-email="john@example.com"><td>1</td><td>John</td><td>john@example.com</td><td><button class="edit-btn btn btn-primary">Edit</button></td></tr><!-- 其他行 --></tbody></table><!-- 模态框 --><div class="modal fade" id="myModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Edit User</h4></div><div class="modal-body"><form id="formData"><div class="form-group"><label for="editId">ID</label><input type="text" class="form-control" id="editId" readonly></div><div class="form-group"><label for="editName">Name</label><input type="text" class="form-control" id="editName"></div><div class="form-group"><label for="editEmail">Email</label><input type="text" class="form-control" id="editEmail"></div></form></div><div class="modal-footer"><button type="button" class="btn btn-primary" id="saveBtn">Save</button><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button></div></div></div></div><script>$(document).ready(function () {// 通过事件委托监听编辑按钮点击事件$('#data-table').on('click', '.edit-btn', function () {// 获取整行数据var $row = $(this).closest('tr');// 将整行数据转换为JavaScript对象var rowData = {id: $row.data('id'),name: $row.data('name'),email: $row.data('email')};// 设置模态框表单字段的值$('#editId').val(rowData.id);$('#editName').val(rowData.name);$('#editEmail').val(rowData.email);// 打开模态框$('#myModal').modal('show');});// 监听保存按钮点击事件$('#saveBtn').on('click', function () {// 获取表单字段值并存储到 formDatavar formData = {};$('#formData input').each(function () {formData[$(this).attr('name')] = $(this).val();});// 这里可以将 formData 对象发送到服务器保存或执行其他操作console.log(formData);// 关闭模态框$('#myModal').modal('hide');});});</script>
</body></html>