bootstrap编辑回显案例

bootstrap编辑回显案例

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bootstrap Table Edittitle>
    <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/[email protected]/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>IDth>
                <th>Nameth>
                <th>Emailth>
                <th>Actionth>
            tr>
        thead>
        <tbody>
            <tr data-id="1" data-name="John" data-email="[email protected]">
                <td>1td>
                <td>Johntd>
                <td>[email protected]td>
                <td><button class="edit-btn btn btn-primary">Editbutton>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 Userh4>
                div>
                <div class="modal-body">
                    <form id="formData">
                        <div class="form-group">
                            <label for="editId">IDlabel>
                            <input type="text" class="form-control" id="editId" readonly>
                        div>
                        <div class="form-group">
                            <label for="editName">Namelabel>
                            <input type="text" class="form-control" id="editName">
                        div>
                        <div class="form-group">
                            <label for="editEmail">Emaillabel>
                            <input type="text" class="form-control" id="editEmail">
                        div>
                    form>
                div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="saveBtn">Savebutton>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Closebutton>
                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>

你可能感兴趣的:(bootstrap,javascript,ecmascript)