bootstrap编辑回显案例

发布时间：2024年01月24日

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 () {
                // 获取表单字段值并存储到 formData
                var formData = {};
                $('#formData input').each(function () {
                    formData[$(this).attr('name')] = $(this).val();
                });

                // 这里可以将 formData 对象发送到服务器保存或执行其他操作
                console.log(formData);

                // 关闭模态框
                $('#myModal').modal('hide');
            });
        });
    </script>
</body>

</html>
文章来源:https://blog.csdn.net/weixin_52236586/article/details/135819294
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章