如何获取可编辑表中的数据以通过 AJAX 发送？答案

【问题标题】：How to get data in an Editable Table to send via AJAX?如何获取可编辑表中的数据以通过 AJAX 发送？
【发布时间】：2020-07-11 20:33:10
【问题描述】：

我有一个模态，并且有一个动态可编辑表。我正在寻找一种将可编辑表的数据获取到 JS 变量的方法。然后我可以通过 AJAX 将这些数据传递给控制器。我尝试了很多代码。但我找不到合适的方法。我应该如何获取变量的值？

表格刀片

                <div class="col-lg-12 mt-4 mb-3">
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center customizable-table text-center" id="opening_invoice_table">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col">Date</th>
                                    <th scope="col">Detail</th>
                                    <th scope="col">Invoice No</th>
                                    <th scope="col">Amount</th>
                                    <th scope="col">Action</th>
                                </tr>
                            </thead>
                            <tbody id="opening_invoice_table_body">
                                <tr>
                                    <td><input type="date" class="form-control form-control-alternative date" name="opening_invoice[1][date]"></td>
                                    <td><input type="text" class="form-control form-control-alternative detail" name="opening_invoice[1][detail]"></td>
                                    <td><input type="text" class="form-control form-control-alternative invoice-no" name="opening_invoice[1][invoice_no]"></td>
                                    <td><input type="number" class="form-control form-control-alternative amount" name="opening_invoice[1][amount]" min="0" step="any" placeholder="0.00"></td>
                                    <td><a class="btn btn-sm delete-record btn-danger" id="delete_row"><i class="fas fa-trash-alt"></i></a></td>
                                </tr>
                            </tbody>

                            <tfoot>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th><label>Total Amount</label></th>
                                    <th><input type="number" class="form-control form-control-alternative amount-calculate" name="total_amount" id="total_amount" placeholder="0.00" readonly></th>
                                    <th></th>
                                </tr>
                            </tfoot>

                        </table>

                        <a class="btn btn-info pull-right add-record mt-2" data-added="0" title="Add Row" id="add_row"><i class="fa fa-plus"></i> Add Row</a>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <div class="col-lg-12 text-right">
                    <button type="submit" class="btn btn-success"><i class="fas fa-download"></i> Save</button>
                    <button type="reset" class="btn btn-success"><i class="fas fa-eraser"></i> Clear</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal"><i class="fa fa-window-close"></i> Close</button>
                </div>
            </div>
        </form>

脚本

<script>
    $(document).ready(function(){
        var counter = 2;
        //add rows
        $("#add_row").on("click", function () {
            var newRow = $("<tr>");
            var cols = "";

            cols += '<td><input type="date" class="form-control form-control-alternative date" name="opening_invoice[' + counter + '][date]"></td>';
            cols += '<td><input type="text" class="form-control form-control-alternative detail" name="opening_invoice[' + counter + '][detail]"></td>';
            cols += '<td><input type="text" class="form-control form-control-alternative invoice-no" name="opening_invoice[' + counter + '][invoice_no]"></td>';
            cols += '<td><input type="number" class="form-control form-control-alternative amount" name="opening_invoice[' + counter + '][amount]" min="0" step="any" placeholder="0.00"></td>';
            cols += '<td><a class="btn btn-sm delete-record btn-danger" id="delete_row"><i class="fas fa-trash-alt"></i></a></td>';

            newRow.append(cols);
            $("#opening_invoice_table").append(newRow);
            counter++;
        });

        //delete rows
        $("#opening_invoice_table").on("click", "#delete_row", function (event) {
            $(this).closest("tr").remove();       
            counter -= 1
            counter++
        });

    });

         //calculate total amount
         $("#opening_invoice_table").on('input', '.amount', function () {
        var calculated_total_sum = 0;

        $("#opening_invoice_table .amount").each(function () {
            var get_textbox_value = $(this).val();
            if ($.isNumeric(get_textbox_value)) {
                calculated_total_sum += parseFloat(get_textbox_value);
            }                  
        });

        $("#total_amount").val(calculated_total_sum);
   });


   function newOpeningInvoice() {
    var e = window.event || arguments.callee.caller.arguments[0];

    e.preventDefault();

    //Here I want to get table data. Below variables used for just testing purpose.
    //var date = +$('.amount').val();
    // var detail = $("input[class='detail']").val();
    // var invoice_no = +$('.detail-no').val();
    // var amount = +$('.amount').val();

    // var date = "2020-03-27";
    // var detail ="value";

    //alert(amount);


    $.ajax({
        url: "opening_invoice/create",
        type: "POST",
        data: {'date': date, 'detail': detail, 'invoice_no': invoice_no, 'amount': amount, '_token':'{{csrf_token()}}' },
        success: function (data) {
            $('#add_opening_invoice_modal').modal('hide');

            swal({
                title: "Success!",
                text: "Opening Invoice Saved Successfully!",
                type: "success",
                showConfirmButton: false,
                timer: 1500,
            });
        }
    });

    return false;
}

</script>

【问题讨论】：

在执行 ajax 代码时是否收到任何错误或消息？这个网址：“opening_invoice/create”也是一个真实的网址吗？如果你在你的浏览器 url 中这样写：your_hostname/opening_invoice/create 它会显示 0 个错误吗？在控制台和页面本身？此外，您似乎正在执行 POST 请求，因此您将数据从 javascript 发布到其他内容。如果我理解您的问题，您希望将 HTML 数据转换为 JavaScript。
@Allart 实际上我想要的是在提交表单时将可编辑表的值获取到 var 并保存到数据库中。我尝试通过硬代码值传递数据。它正在工作。（我已经注释了这段代码中的变量）
我自己可能不够了解，但您的可编辑表格在哪里？在 javascript 部分中，还是 HTML 中的标记。我没有看到你想要将什么数据放入变量中

@Allart 我已经用 Image 编辑了我的问题。 HTML 部分用于表格的第一行。用于动态添加部分的 Javascript 部分。

啊，我明白了，我认为“保存”按钮不起作用？使用 ajax 调用

标签： javascript jquery laravel bootstrap-modal

【解决方案1】：

我可以找到答案，并且工作正常。 serialize() 用于通过 AJAX 将动态表数据数组发送到控制器。

//add rows
            $('#add_row').on('click', function () {
                var tr = '<tr>'+
                '<td><input type="date" class="form-control form-control-alternative date" name="date[]"></td>'+
                '<td><input type="text" class="form-control form-control-alternative detail" name="detail[]"></td>'+
                '<td><input type="text" class="form-control form-control-alternative invoice-no" name="invoice_no[]"></td>'+
                '<td><input type="number" class="form-control form-control-alternative amount" name="amount[]" min="0" step="any" placeholder="0.00"></td>'+
                '<td><a class="btn btn-sm delete-record btn-danger" id="delete_row"><i class="fas fa-trash-alt"></i></a></td>'+
                '<tr>';
                $('tbody').append(tr);
            });


            //delete rows
            $('#opening_invoice_table').on('click', '#delete_row', function (event) {
                    var last=$('tbody tr').length;
                    if(last==1){
                    //do nothing
                    } else {
                    $(this).parent().parent().remove();
                    }
               });


            //calculate total amount
            $("#opening_invoice_table").on('input', '.amount', function () {
            var calculated_total_sum = 0;
     
            $("#opening_invoice_table .amount").each(function () {
                var get_textbox_value = $(this).val();
                if ($.isNumeric(get_textbox_value)) {
                calculated_total_sum += parseFloat(get_textbox_value);
                }                  
            });
            $("#total_amount").val(calculated_total_sum);
       });
  

    });


    //submit opening invoice data
        $('#opening_invoice_form').on('submit', function(event){
            event.preventDefault();
            $.ajax({
                url:"opening_invoice/create",
                method:'post',
                data:$(this).serialize(),
                dataType:'json',
                success:function(data)
                {
                    $('#add_opening_invoice_modal').modal('hide');
                    swal({
                        title: "Success!",
                        text: "Opening Invoice Saved Successfully!",
                        type: "success",
                        showConfirmButton: false,
                        timer: 1500,
                    });
                }
            })
    });

<form id="opening_invoice_form">
            @csrf
                <div class="modal-body">
                
                    <div class="col-lg-12 mt-4 mb-3">
                        <div class="table-responsive">
                            <table class="table table-hover align-items-center customizable-table text-center" id="opening_invoice_table">
                                <thead class="thead-light">
                                    <tr>
                                        <th scope="col">Date</th>
                                        <th scope="col">Detail</th>
                                        <th scope="col">Invoice No</th>
                                        <th scope="col">Amount</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="date" class="form-control form-control-alternative date" name="date[]"></td>
                                        <td><input type="text" class="form-control form-control-alternative detail" name="detail[]"></td>
                                        <td><input type="text" class="form-control form-control-alternative invoice-no" name="invoice_no[]"></td>
                                        <td><input type="number" class="form-control form-control-alternative amount" name="amount[]" min="0" step="any" placeholder="0.00"></td>
                                        <td><a class="btn btn-sm delete-record btn-danger" id="delete_row"><i class="fas fa-trash-alt"></i></a></td>
                                    </tr>
                                </tbody>

                                <tfoot>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th><label>Total Amount</label></th>
                                        <th><input type="number" class="form-control form-control-alternative amount-calculate" name="total_amount" id="total_amount" placeholder="0.00" readonly></th>
                                        <th></th>
                                    </tr>
                                </tfoot>

                            </table>

                            <a class="btn btn-info pull-right add-record mt-2" data-added="0" title="Add Row" id="add_row"><i class="fa fa-plus"></i> Add Row</a>
                        </div>
                    </div>
                </div>
                
                <div class="modal-footer">
                    <div class="col-lg-12 text-right">
                        <button type="submit" class="btn btn-success" id="sad"><i class="fas fa-download"></i> Save</button>
                        <button type="reset" class="btn btn-success"><i class="fas fa-eraser"></i> Clear</button>
                        <button type="button" class="btn btn-success" data-dismiss="modal"><i class="fa fa-window-close"></i> Close</button>
                    </div>
                </div>
            </form>

【讨论】：

【解决方案2】：

好吧，我认为这段代码可能会对您有很大帮助。

我建议您在 javascript 本身中创建“动态”部分。在我看来，这样您可以更轻松地使用数据。方法如下：

Javascript：

//To use them globally in the script. NOTE: Needs to be above the onload, otherwise javascript does not know the elements yet.
let trElement;
let tdElement;
let inputElement;

window.onload = onload();

function onload() {
    //Create elements
    trElement = document.createElement("tr");
    tdElement = document.createElement("td");
    inputElement = document.createElement("input");

    //Set elements parameters
    inputElement.type = "date";
    inputElement.classList.add("form-control", "form-control-alternative", "date");
    inputElement.name = "opening_invoice[1][date]";

    //Appends
    tdElement.append(inputElement);
    trElement.append(tdElement);
    document.getElementById("opening_invoice_table_body").appendChild(trElement);



    //I do not have jQuery installed but you should create them like this:
    // let inputElement = $('<input/>', {
    //     'class': 'form-control form-control-alternative date'
    //     'name': ...
    // });
}


function createPartOfATable() {
    console.log(inputElement.value);
}

HTML：

<div class="col-lg-12 mt-4 mb-3">
    <div class="table-responsive">
        <table class="table table-hover align-items-center customizable-table text-center" id="opening_invoice_table">
            <thead class="thead-light">
                <tr>
                    <th scope="col">Date</th>
                    <th scope="col">Detail</th>
                    <th scope="col">Invoice No</th>
                    <th scope="col">Amount</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            //This part has changed. Removed the HTML inside this tbody since I create it in javascript.
            <tbody id="opening_invoice_table_body"></tbody>

            <tfoot>
                <tr>
                    <th></th>
                    <th></th>
                    <th><label>Total Amount</label></th>
                    <th><input type="number" class="form-control form-control-alternative amount-calculate" name="total_amount" id="total_amount" placeholder="0.00" readonly></th>
                    <th></th>
                </tr>
            </tfoot>

        </table>

        <a class="btn btn-info pull-right add-record mt-2" data-added="0" title="Add Row" id="add_row" onclick="createPartOfATable();"><i class="fa fa-plus"></i> Add Row</a>
    </div>
</div>

请记住，我是用纯 Javascript 创建的，因为我目前没有安装 jQuery。但我写了一些关于你应该如何做的例子。 jQuery 文档还为您提供了很多使用 jQuery 进行操作的信息。

【讨论】：