javascript - 为具有动态列的数据表动态且正确地添加相同类型的行？

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 执行任何操作，它就会失败。标记不再与底层数据表“缓存”或内部结构一致。您必须重新生成数据表才能成功添加列。这是一个执行此操作的方案:

//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>的。您引用两个不同的表感到困惑:) 请参阅工作演示 -> http://jsfiddle.net/qmh399ap/