Jquery 使用动态创建的行输入从Datatable列检索数据,然后选择列表
我的一个视图中有以下html表: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-
@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正是:谢谢!