Javascript 数据表在表之间移动行

我正在为sql查询结果构建一个简单的接口

我选择使用DataTables，并在其帮助下创建了如下内容：

我在将行从一个表移动到另一个表时遇到了问题，现在我有两个函数来完成它们的工作，但我希望有一个函数，因为我的解决方案只在一个方向上工作——我可以从一个表移动到另一个表，只需一个

$(".deleteMe1").on("click", function (event) {
    var row = $(this).closest("tr").get(0);
    var addElement = oTable1.fnGetData(row);
    oTable2.fnAddData(addElement);
    // Remove Element from the source table
    var removeElement = oTable1.fnGetPosition(row);
    oTable1.fnDeleteRow(removeElement, null, true);
});

$(".deleteMe2").on("click", function (event) {
    var row = $(this).closest("tr").get(0);
    var addElement = oTable2.fnGetData(row);
    oTable1.fnAddData(addElement);
    // Remove Element from the source table
    var removeElement = oTable2.fnGetPosition(row);
    oTable2.fnDeleteRow(removeElement, null, true);
});

---

因此，我的问题是：如何将上述函数合并为一个。

随着行的变化，使用将delete按钮绑定到较低的不变元素。在下面的情况下，单击事件绑定到$（document），然后使用第二个参数聚焦

$(document).on("click", '.deleteMe', function (event) 
{
    // Get the id of the clicked table for comparison
    var id = $(this).closest('table').attr('id');

    // Assign the tables to the table object
    var table = {
        primary : (id === 'example1') ? oTable1 : oTable2,
        secondary : (id !== 'example1') ? oTable1 : oTable2
    };

    // Instead of calling the tables in seperate functions just use the  dynamically
    // assigned table.primary.x() and table.secondary.x()
    var row = $(this).closest("tr").get(0);

    var addElement = table.primary.fnGetData(row);

    table.secondary.fnAddData(addElement);

    var removeElement = table.secondary.fnGetPosition(row);

    table.primary.fnDeleteRow(removeElement, null, true);

});

这将以两种方式工作，具体取决于在哪个表中单击了“删除”按钮。您可以通过硬编码主/辅表变量或将.on函数的第二个参数设置为仅在一个表中使用的类，来修改此参数，以便在一个或两个方向上轻松工作

要对表运行更新，请将此行添加到上述函数的底部：

oTable1.fnDraw();

这将强制表格在每次添加或删除新行时重新绘制，这对您很有用，因为您可以使用：

"fnDrawCallback": function() {
    console.log('draw callback executed');
 };

在datatable对象中指定应该发生什么。更新页脚、提取相关ajax数据等

---

希望这能有所帮助。

谢谢您的快速回答：）这是我的第一个问题的答案，但我应该如何处理显示/隐藏链接？尝试删除

fnFooterCallback

这样第2-8列隐藏，第9列可见，我可以修改它吗？还是我必须使用fnDrawCallback？如何访问页脚中的第二行？非常感谢：）当页脚在页面上重新绘制时，会调用

fnFooterCallback

。两者都有各自的用途，只是被解雇的时候不同而已。您无法访问

fnDrawCallback

中的行数据，因此在您的情况下，请继续使用页脚回调。是的，但如何修复我的代码？当我删除

fnFooterCallback

时，我的列正确地显示/隐藏，但当我突然添加它时，我得到了奇怪的行为，只有第三列隐藏。打开您的示例，尝试将行从一个表移动到另一个表，这很有效，然后单击

隐藏

链接行并尝试移动行，行无法正确更新。所以我认为我的show/hide函数崩溃了：（另外，对不起我的英语，希望我的问题和评论可以理解：）