Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/84.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 使用动态创建的行输入从Datatable列检索数据,然后选择列表_Jquery_Asp.net Mvc_Input_Datatables_Http Post - Fatal编程技术网

Jquery 使用动态创建的行输入从Datatable列检索数据,然后选择列表

Jquery 使用动态创建的行输入从Datatable列检索数据,然后选择列表,jquery,asp.net-mvc,input,datatables,http-post,Jquery,Asp.net Mvc,Input,Datatables,Http Post,我的一个视图中有以下html表: @using (Html.BeginForm("Add", "Item", FormMethod.Post, new { @class = "form-horizontal", id = "ItemForm", role = "form" })) { <body> <h2>Invoice</h2> <table id="ItemTable" class="table table-

我的一个视图中有以下html表:

@using (Html.BeginForm("Add", "Item", FormMethod.Post, new { @class = "form-horizontal", id = "ItemForm", role = "form" }))
{
    <body>
        <h2>Invoice</h2>

        <table id="ItemTable" class="table table-hover table-secondary" style="width:100%">
            <thead>
                <tr>
                    <th></th>
                    <th>ItemType</th>
                    <th>Unit</th>
                    <th>Quantity</th>
                    <th>Price</th>
                    <th>Total</th>
                    <th></th>
                </tr>
            </thead>
        </table>

    </body>
}
这是我的jQuery数据表:

$(document).ready(function () {
    var table = $('#ItemTable').DataTable({
        "dom": '<"toolbar">frtip',
        "paging": true,
        "pagingType": "full_numbers",
        "searching": false,
        responsive: {
            details: {
                type: 'column'
            }
        },
        columnDefs: [{
            className: 'control',
            orderable: false,
            targets: 0
        }],
        order: [1, 'asc']
    });

    $("div.toolbar").html(
        '<button id="addRow" type="button" class="btn btn-outline-info fa fa-plus"> Add</button> <div class="divider"/>' +
        '<button id="SaveItemButton" type="submit" class="btn btn-outline-secondary fa fa-save"> Save</button> <div class="divider"/>' +
        '<button id="PreviewButton" type="button" class="btn btn-outline-info fa fa-eye"> Preview</button> <div class="divider"/>' +
        '<button id="PrintButton" type="button" class="btn btn-info fa fa-print"> Print</button> <div class="divider"/>' +
        '<button id="SendButton" type="button" class="btn btn-lump-sum fa fa-envelope"> Send</button> <div class="divider"/>' +
        '<button id="DeleteButton" type="button" class="btn btn-secondary fa fa-trash"> Delete </button> <div class="divider"/>'
    );

    var counter = 1;

    $('#addRow').on('click', function () {
        table.row.add([
            '',
            '<input class = "form-control" type="text">',

            '<select class="form-control defaultpicker">' +
                '<option value="select">dan</option>' + 
                '<option value="select">Komad</option>' +
                '<option value="select">Sat</option>' +
                '<option value="select">m</option>' +
                '<option value="select">m2</option>' +
                '<option value="select">m3</option>' +
                '<option value="select">kg</option>' +
                '<option value="select">lit</option>' +
                '<option value="select">pak</option>' +
                '<option value="select">reč</option>' +                               
            '</select > ',

            '<input class = "form-control" type="number">',
            '<input class = "form-control" type="text">',
            '<input class = "form-control" type="text" readonly>',
            '<button type="button" Id="DeleteButton" class="fa fa-times select-row btn btn-secondary btn-sm" data-id=""></button>',            
        ]).draw(false);

        counter++;
        $('#ItemTable').dataTable().fnPageChange('last');
    });

    $('#ItemTable').on("click", "#DeleteButton", function () {
        var table = $('#ItemTable').DataTable();
        var row;

        console.log($(this).closest('table'));
        if ($(this).closest('table').hasClass("collapsed")) {
            var child = $(this).parents("tr.child");
            row = $(child).prevAll(".parent");
        } else {
            row = $(this).parents('tr');
        }

        table.row(row).remove().draw();
    });

    // Automatically add a first row of data
    $('#addRow').click();


    $('#ItemForm').submit(function () {
        debugger;
        var sData = table.$('input').serialize();
        alert("The following data would have been submitted to the server: \n\n" + sData);
        return false;
    });
});

提交表单时,不会检索来自DataTable内输入的数据。此部分返回var sData=table.$'input'。序列化;空字符串。在这种情况下,如何从输入和选定列表中检索数据,以便将数据提交到服务器。

您的表单控件都没有不会发布的名称属性anything@StephenMuecke正是:谢谢!