动态地为动态列的数据表添加相同类型的行？

Question

我的数据表允许用户使用数据表API添加行。

$('#table_add').on( 'click', function () {
    table.row.add( [
        "<textarea id=\"mp\" name=\"c1\"></textarea>",
        "<input type=\"number\" id=\"dis\" name=\"col2\">",
        "<input type=\"number\" id=\"mrc\" name=\"col3\">",
        "<input type=\"number\" id=\"mdp\" name=\"col4\">",
    ] ).draw(false);
    mpsum++
} );

也可以添加列。

function AddColumn(){
    $('#table tr').append($("<td>"));
    $('#table thead tr>td:last').append($("<textarea id=\"m\" name=\"addedHeader\"></textarea>"));
    $('#mptable tbody tr').each(function(){
        mpsum++;
        $(this).children('td:last').append($("<input type=\"number\" id=\"mdp\" name=\"addedRows\">"))});
}

这是我的数据表在添加任何内容之前的样子。

如果用户在添加新列之前添加新行，则可以正确添加新行。

在列之前添加行

但是，如果用户在添加新行之前添加新列，则我的数据表无法正确地将新行添加到新列中。

在行之前添加列

我有什么办法可以解决这个问题吗？

Answer 1

您无法动态添加列。完全没有。 似乎可以工作，但这只是因为你通过jQuery处理DOM。只要您尝试使用dataTables API执行任何操作，它就会失败。标记不再与底层dataTables＆＃34; cache＆＃34;或内部结构。您必须重新生成dataTable才能成功添加列。这是一个这样做的计划：

//Your table must have destroy: true
var table = $('#example').DataTable({
  //other options goes here
  destroy: true
})  

//in AddColumn, destroy() the table, then add new DOM nodes properly
//table = $('#example').DataTable({}) will recreate the dataTable
//WITH the old settings
function AddColumn() {
  table.destroy();
  $('#example thead tr').append('<th>New</th>');
  $('#example tbody tr').each(function(i, tr) {
    $(tr).append('<td>'+i+'</td>');
  })
  table = $('#example').DataTable({})
}

在此之后，您可以向表中添加新行。当然，您应该向新<th>和新<td>＆＃39; s插入任何内容。被你指的是两个不同的表格而感到困惑:)参见工作演示 - ＆gt;的 http://jsfiddle.net/qmh399ap/