Question

我已关注此帖子（http://sebastiandahlgren.se/2013/07/27/adding-lines-to-table-with-jquery/）并在我的jsp页面中实现了添加行和删除行功能。

除了一个问题外，一切正常。删除行按钮还删除在页面加载期间加载的行（比如30行）。

以下是代码段

 function deleteRow () {
    if (count != 1) {
        $("table#myTable").dataTable().fnDeleteRow(count - 1);

        count--;
    }
  }

我只想允许那些使用datatables插件的addrow函数动态添加的行。如何解决这个问题。

Answer 1

您需要区分预加载的行和在js代码中动态添加的行。一种可能的解决方案是仅为动态添加的行添加自定义css类：

function addRow() {
    var table = $('table#myTable').dataTable();
    table.fnAddData( [
          '<input type="text" name="first_name_' + count + '">',
          '<input type="text" name="last_name_' + count + '">' ] );
    $(table._('tr')[count]).addClass('dynamicRow'); // add the dynamic css class

    count++;
 }

然后在删除行方法中，检查行css类是否包含动态css类。如果是这样，请删除该行，否则不执行任何操作。这是一个例子：

function deleteRow () {
  if (count != 1) {
      var table = $("table#myTable").dataTable();
      if ($(table._('tr')[count - 1]).hasClass('dynamicRow')) {
          table.fnDeleteRow(count - 1);

          count--;
      }
   }
}

Answer 2

编辑：我误读了这篇文章，实际上是使用了1.9.4！但无论如何 - 如果你想要升级，我建议，这里是重写的文章中的代码，以利用功能强大的1.10.x API。正如@IvayloSlavov建议的那样，您可以在插入的行中添加一个类。我会在行中添加一个属性，例如<tr dynamic="true" ...></tr>。使用新的API还有一个优点，就是在这个过程中更新了像分页一样的dataTables控件（除了你摆脱了那些不那么聪明的count变量:)。

var row,
    table;

$(document).ready(function() {
    table = $('table#myTable').DataTable({
        filter: false,
        info: false,
        paginate: false,
        order: []
    });
    // Add initial row
    addRow();
});

function addRow() {
    row = table.row.add([
        '<input type="text" name="first_name_' + table.rows().data().length + '">',
        '<input type="text" name="last_name_' + table.rows().data().length + '">'
    ]).draw().node();
    $(row).attr('dynamic', true);
}

function deleteRow() {
    row = table.row(table.rows().data().length-1).node();
    if ($(row).is('[dynamic]')) {
        table.row(row).remove().draw();
    }
}

参见演示 - ＆gt;的 http://jsfiddle.net/9rLv0uob/

jQuery数据表删除行但只删除动态添加的行

2 个答案: