Question

每行都有一个按钮，当按下该行从一个表中删除，并添加到另一个表中时：

var row = $(this).closest("tr").remove().clone()
$('.my-other-table-class').append(row);

并且起初看起来效果很好，行从一个表中删除并添加到另一个表中，但是当我强制重新绘制时（例如，通过更改其中一个列的排序），所有行都是回到原来，按钮不再有效。删除的行和添加到另一个表的行都是这种情况。

这是因为我使用.jsp表作为数据源吗？如果我在加载时使用JavaScript动态地将所有行添加到表中，或者如果我使用modelMap集合作为数据源，这是否会正常工作？

非常感谢任何建议。

Answer 1

未来googlers的解决方案 - 我不知道我的Google-Fu如何找不到答案，我拥有所有合适的关键字！

简而言之：

我这样做是为了补充：

$('.my-other-table-class').append(row);

这要删除：

var row = $(this).closest("tr").remove().clone()

但我应该做这个添加：

$('.my-other-table-class').dataTable().fnAddData([$(this).attr("data-val1"), "var2"]);

这要删除：

$('.my-table').dataTable().fnDeleteRow($(this).closest('tr')[0]);

详细信息：

我真正在这里做的是用JQuery修改DOM（好吧，但我真的很新，请记住......） - 我认为DOM是数据源对于我的桌子，这样有意义吗？该表重新绘制，重新读取DOM并更新？好吧不是真的。

为了保持动态，如果你使用DOM（换句话说，HTML，或者我的情况是.jsp呈现为HTML）作为数据源，在初始化时，数据表将把所有信息复制到JavaScript数组中。 ..而不是我最初的想法：

“DOM没有正确更新，而且这些问题正在传播到我的桌面......因为HTML是静态的......或者什么？”

事实证明实际问题是：

“我正在更新DOM，但真正的数据源是一个我没有看到的JavaScript数组。所以在重绘时，这个数组会覆盖DOM并且我的更改正在丢失。”

TL; DR ：使用数据表API，除非您需要，否则不要直接修改数据源。

Answer 2

如果事件处理程序是问题之一，那么设置事件处理程序可能会有所帮助：

$("#myTable").on("click", "button.moveMe", function(e) {
    e.preventDefault();
    var row = $(this).closest("tr").remove().clone()
    $('.my-other-table-class').append(row);
});

这将在具有id="myTable"的表上设置处理程序。处理程序将使用“moveMe”类在按钮上查找单击事件。它将捕获稍后添加的行上的事件，以及创建此挂钩时存在的行。

参考：http://api.jquery.com/on/

从JQuery DataTable中删除行 - 但是一旦重绘表，它就会返回。我的.JSP数据源是什么原因？

2 个答案: