javascript - 我想获取新选择的数据并将其从模态附加到 Laravel 行中的数据表，以通过 ajax 请求控制器进入数据库

Question

首先，我将向您展示动态包含数据的模式。

<div class="modal" id="modalpopin2" tabindex="-1" role="dialog" aria-labelledby="modal-large" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content" style="width: 900px;">
                <div class="block block-themed block-transparent mb-0">
                    <div class="block-header bg-primary-dark">
                        <h3 class="block-title">Requirements
                            Mapping</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                <i class="si si-close"></i>
                            </button>
                        </div>
                    </div>
                    <div class="block-content">
                        <div class="block">
                            <div class="block-header block-header-default">
                                <h3 class="block-title">
                                    <code>Select Requirement </code>
                                </h3>
                            </div>
                            <form id="form1">
                                <!-- If you put a checkbox in thead section, it will automatically toggle all tbody section checkboxes -->
                                <table class="js-table-checkable table table-hover" id="DataTables_Table_1">
                                    <thead>

                                    <tr>
                                        <td class="text-center">

                                        </td>
                                        <th>ReqList</th>
                                        <th class="d-none d-sm-table-cell" style="width: 15%;">Section</th>
                                        <th class="d-none d-sm-table-cell" style="width: 20%;">Standrd.Reference</th>
                                        <th class="d-none d-sm-table-cell" style="width: 20%;">Description</th>
                                        <th class="d-none d-sm-table-cell" style="width: 20%;">Critically</th>
                                        <th class="d-none d-sm-table-cell" style="width: 20%;">Weight</th>

                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($subreq as $req)
                                        <tr>

                                            <td class="text-center">
                                                <label class="css-control css-control-primary css-checkbox">
                                                    <input type="checkbox" class="css-control-input" >
                                                    <span class="css-control-indicator"></span>
                                                </label>
                                            </td>
                                            <td>
                                                @foreach($listing as $listings)
                                                    @if($req->list_id==$listings->id)

                                                        <em>{{$listings->title}}</em>

                                                    @endif
                                                @endforeach


                                            </td>
                                            <td class="d-none d-sm-table-cell">

                                                @foreach($elc as $new)

                                                    @if($req->stan_ref_id==$new->id)

                                                        <em>{{$new->description}}</em>

                                                    @endif

                                                @endforeach


                                            </td>
                                            <td class="d-none d-sm-table-cell">
                                                <em>{{$req->standard_ref}}</em>
                                            </td>

                                            <td class="d-none d-sm-table-cell">

                                                <em>{{$req->description}}</em>
                                            </td>
                                            <td class="d-none d-sm-table-cell">
                                                <em>{{$req->critically}}</em>
                                            </td>
                                            <td class="d-none d-sm-table-cell">

                                                <em>{{$req->weight}}</em>
                                            </td>
                                            <td class="d-none d-sm-table-cell">

                                            </td>


                                        </tr>

                                    @endforeach


                                    </tbody>
                                </table>
                            </form>
                            <form class="modal-footer">
                                <button type="button" class="btn btn-alt-secondary" data-dismiss="modal">Close</button>
                                <button type="button" id="add_data" class="btn btn-alt-success" data-dismiss="modal">
                                    <i class="fa fa-check"></i> Add
                                </button>

                            </form>
                        </div>
                        <!-- END Checkable Table -->
                    </div>
                    <!-- END Page Content -->

                    </main>

                </div>

            </div>
        </div>
    </div>

好的，现在我将向您展示在 Laravel Blade 的数据表中选择和附加数据的脚本：

 $('#map').click(function () {



                $('#modalpopin2').modal('show');


            });

            $(document).ready(function () {

               



                var table = $('#DataTables_Table_1').DataTable();

                $('#add_data').on('click', function() {


                    var select_rows = $(".table input:checked").parents("tr").clone();


                    table.rows.add(select_rows.toArray()).draw();


                });


            });

现在我将向你展示我的刀片数据表：

<div class="block">
        <div class="block-header block-header-default">
            <h3 class="block-title">Requirement Mapping </h3>
        </div>
        <div class="block-content block-content-full">
            <!-- DataTables functionality is initialized with .js-dataTable-full class in js/pages/be_tables_datatables.min.js which was auto compiled from _es6/pages/be_tables_datatables.js -->
            <table class="table table-bordered table-striped table-vcenter js-dataTable-full">
                <thead>
                <tr>
                    <th class="text-center">
                        <button type="button" class="btn btn-sm btn-circle btn-alt-success mr-5 mb-5" id="map">
                            <i class="fa fa-plus mr-5"></i>
                        </button>
                    </th>
                    <th>Req.List</th>
                    <th class="d-none d-sm-table-cell">Section</th>
                    <th class="text-center" style="width: 15%;">Standard.ref</th>
                    <th class="text-center" style="width: 15%;">Description</th>
                    <th class="text-center" style="width: 15%;">Critically</th>
                    <th class="text-center" style="width: 15%;">Weight</th>

                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="text-center"></td>
                    <td class="font-w600">
                    <td class="d-none d-sm-table-cell"></td>
                    <td class="d-none d-sm-table-cell">
                        <span class="badge badge-info"></span>
                    </td>
                    <td class="d-none d-sm-table-cell"></td>
                    <span class="badge badge-info"></span>
                    </td>
                    <td class="d-none d-sm-table-cell"></td>
                    <span class="badge badge-info"></span>
                    </td>
                    <td class="d-none d-sm-table-cell"></td>
                    <span class="badge badge-info"></span>
                    </td>

                </tr>
                </tbody>
            </table>
        </div>
    </div>

结束摘要：我想要的是从模态表中获取新选择的行的值并通过ajax调用存储。

$.ajax({
                    data: selecte_rows,
                    url: "{{ route('store_ref') }}",
                    type: "POST",
                    dataType: 'json',
                    success: function (data) {


                      //

                    },

                    error: function (data) {
                        console.log('Error:', data);
                        $('#saveBtn').html('Save Changes');
                    }
                });
            }); 

标签： javascriptphpjqueryajaxlaravel