javascript - 如何获取可编辑表中的数据并通过 AJAX 发送？

Question

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

成型 Blade

                <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>

Answer 1

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

我建议您在 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 实现此操作的信息。