Question

我遇到了我不知道如何解决的按钮问题。我有一张桌子，每排都有一个＆＃34; Pack＆＃34;动作按钮。单击此按钮后，该按钮将被删除，以便用户不会再次意外地点击该按钮并打包＆＃39;相同的项目两次。

到目前为止它一直运行良好，但我注意到当你点击表格的下一页（当它有超过15行左右）并再次返回第一页时，你点击的任何按钮在第一页（并删除）回来了。

无论你移动到哪个页面，我都需要我的桌子来记住＆＃34;哪些行＆＃39;单击/删除操作按钮。不过我不知道怎么做。

以下是我点击以下内容时删除操作按钮的代码：

// Pack action button
$(document).on('click', ".box-electrode", function (e) {
    var id = $(this).attr('value');
    var sn = $(this).data('sn');
    addElectrodeToBox(id, sn);
    $(this).remove();
});

表本身是使用DataTables创建的。

有人能指出我正确的方向吗？

修改

以下是我根据下面的答案提出的一些代码，但它不起作用。 JS控制台中没有错误，它似乎没有做任何事情。

$(document).on('page.dt', function () {
    var $allSerialNumbers = $('.box-electrode');

    $('#electrodes li').each(function (i, li) {
        var $id = $(li).data('id');
        for(var index = 0; index < $allSerialNumbers.length; index++){
            if($id == $allSerialNumbers.eq(index).attr('data-id')){
                $('.box-electrode').eq(index).remove();
            }
        }
    })
});

$allSerialNumbers表示所有操作按钮，$('#electrodes')是我与之比较的列表。

我认为问题的一部分（除了我笨拙的JS技能）可能是DataTables＆＃39;页面更改事件page.dt似乎只会影响正在更改的页面，而不会影响正在更改到的页面。例如，当我在我的表的第二页上并单击回到第一页时，我的JS代码正在第二页而不是第一页（这就是我需要的）。

Answer 1

创建一个JavaScript空数组;
DataTables库具有页面更改事件;
当用户按下按钮 - 获取按钮的值时，将其存储在数组中并删除按钮;
当用户更改页面时 - 页面的更改事件将被触发 - ＆gt;将执行清理功能，它将读取数组，按值搜索所需的按钮，如果存在则将其删除。

尝试删除点击按钮，但他们不断回来（JavaScript，HTML）

1 个答案: