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

Question

我关注了这篇文章(http://sebastiandahlgren.se/2013/07/27/adding-lines-to-table-with-jquery/)，并在我的 jsp 页面中实现了添加行和删除行功能。

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

这里是代码sn-p

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

        count--;
    }
  }

我只想允许那些使用数据表插件的 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 类是否包含我们的动态类。如果是这样，请删除该行，否则什么也不做。示例如下：

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 的另一个好处是，数据表控件（如分页）会在过程中更新（除了你摆脱了不那么聪明的 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();
    }
}

查看演示 -> http://jsfiddle.net/9rLv0uob/