jquery DataTables父行和子行作为一个记录而不是两个记录发布到服务器

我有一个问题， jquery DataTables在resize（响应DataTable）上创建父行和子行，我需要保存子行和父行的输入值，并通过ajax发送到控制器操作。

响应（resize）DataTable：

正常（未resize）DataTable：

目前我正在使用此jquery函数将数据发布到服务器：

 $('#SaveItemButton').click(function (e) { var arr = []; var rows = $('#ItemTable').find('tbody').find('tr'); console.log(rows.length); $.each(rows, function (index, item) { var controls = $(this).find('input, select'); console.log(controls.length); item = { ItemType: controls.eq(0).val(), Unit: controls.eq(1).val(), Quantity: controls.eq(2).val(), Price: controls.eq(3).val(), InvoiceDate: $('#InvoiceDate').val(), TransferDate: $('#TransferDate').val(), TransferPlace: $('#TransferPlace').val(), InvoiceDescription: $('#InvoiceDescription').val() }; arr.push(item); }); $.ajax({ url: '/Item/Add', data: JSON.stringify(arr), contentType: 'application/json', type: "POST", dataType: "json", success: function (result) { //alert(result); }, error: function (errormessage) { } }); return false; }); 

但是当Datatable被resize时，它返回两行，然后这些行被发布到服务器。

我通过以下方式从表中检索行：

 var rows = $('#ItemTable').find('tbody').find('tr'); 

如何将所有相关的父行和子行作为一行获取，以便将该行发布到服务器？

父行示例：

    danKomadSatmm2m3kglitpakreč       

子行示例：

   
 
 Unit  danKomadSatmm2m3kglitpakreč  
 
 Quantity    
 
 Price    
 
 Total    
 
     
 
   

控制器发布数据， index 0包含有效数据：

代码片段：

 var table = $('#ItemTable').DataTable({ "dom": 'frtip', "paging": true, "pagingType": "full_numbers", "searching": false, // Solution to responsive table losing data 'columnDefs': [{ 'targets': [1, 2, 3, 4, 5, 6], 'render': function(data, type, row, meta) { if (type === 'display') { var api = new $.fn.dataTable.Api(meta.settings); var $el = $('input, select, textarea', api.cell({ row: meta.row, column: meta.col }).node()); var $html = $(data).wrap('
').parent(); if ($el.prop('tagName') === 'INPUT') { $('input', $html).attr('value', $el.val()); if ($el.prop('checked')) { $('input', $html).attr('checked', 'checked'); } } else if ($el.prop('tagName') === 'TEXTAREA') { $('textarea', $html).html($el.val()); } else if ($el.prop('tagName') === 'SELECT') { $('option:selected', $html).removeAttr('selected'); $('option', $html).filter(function() { return ($(this).attr('value') === $el.val()); }).attr('selected', 'selected'); } data = $html.html(); } return data; } }], 'responsive': true, order: [1, 'asc'] }); // Solution to responsive table losing data $('#ItemTable tbody').on('keyup change', '.child input, .child select, .child textarea', function(e) { var $el = $(this); var rowIdx = $el.closest('ul').data('dtr-index'); var colIdx = $el.closest('li').data('dtr-index'); var cell = table.cell({ row: rowIdx, column: colIdx }).node(); $('input, select, textarea', cell).val($el.val()); if ($el.is(':checked')) { $('input', cell).prop('checked', true); } else { $('input', cell).removeProp('checked'); } }); $('#SaveItemButton').click(function() { var arr = []; var rows = $('#ItemTable').find('tbody').find('tr'); console.log(rows.length); $.each(rows, function(index, item) { var controls = $(this).find('input, select'); console.log(controls.length); item = { ItemType: controls.eq(0).val(), Unit: controls.eq(1).val(), Quantity: controls.eq(2).val(), Price: controls.eq(3).val(), InvoiceDate: $('#InvoiceDate').val(), TransferDate: $('#TransferDate').val(), TransferPlace: $('#TransferPlace').val(), InvoiceDescription: $('#InvoiceDescription').val() }; arr.push(item); }); $.ajax({ url: '/Item/Add', data: JSON.stringify(arr), contentType: 'application/json', type: "POST", dataType: "json", success: function(result) { //alert(result); }, error: function(errormessage) { } }); return false; }); 

   
 
 
 
 
ItemType
 
Unit
 
Quantity
 
Price
 
Total
 
 
 
 
 
 
 
 
  value1 value2 value3 value4 value5 value6 value7 value8 value9  
 
 
 
 
 
 
 
      

Answer 1

好吧，你真的不能。 首先，DT向DOM注入并删除子行及其内容，使它们对简单的jQuery选择器不可见。 您可以定位打开的子行，但这就是全部。

其次，你不能成对选择多个元素。 你可以有例如$('tr.parent, tr.parent ~ tr.child')或类似的东西，但$('tr.parent, tr.parent ~ tr.child')等于$('tr') 。 我会通过API：

 table.rows().every(function() { var $node = this.nodes().to$(); var item = { ItemType: $node.find('input[name=ItemType]').val(), Unit: $node.find('select[name=Unit]').val(), Quantity: $node.find('input[name=Quantity]').val(), Price: $node.find('input[name=Price]').val(), Total: $node.find('input[name=Total]').val(), InvoiceDate: $('#InvoiceDate').val(), TransferDate: $('#TransferDate').val(), TransferPlace: $('#TransferPlace').val(), InvoiceDescription: $('#InvoiceDescription').val() }; arr.push(item) }) 

完全未经测试。 请参阅输入中的JQuery Datatables搜索，并选择在表单控件更改时如何更新DT内部。 否则，您将获得返回默认值/原始值。