在JavaScript中从表中删除操作按钮时的奇怪行为 [英] Odd behavior when removing action buttons from a table in JavaScript

问题描述

我有一个使用DataTables构建表的页面，每行都有一个Action按钮，它将一行中的一些数据（一个ID，一个int）添加到列表中。为了让用户多次点击每个动作按钮，我做到了这样一来，第一次点击它就会被删除。这很好，直到我意识到按钮回来，如果你切换到表的下一页，然后切换回到第一页。

要解决这个问题，我写了一些JS将每行与我的数据列表进行比较，如果该行的数据已经在列表中，它将删除该行的操作按钮。每次重新加载表时，都会发生这种情况（例如，当您使用DataTable的 draw.dt 函数切换到表的另一个页面并重新启动时）。

问题是，当我切换页面和JavaScript去删除按钮时，由于某种原因，它会跳过每隔一行。例如，如果我单击（从而删除）前三行的动作按钮，切换页面并切换回来，我的JS会删除第1行，第3行和第5行的动作按钮，而不是第1,2行和第3行。这样做一致，它必须是某种简单的循环错误，由于我的草率的JS技能，但我找不到它。

这是代码：

  $（document）.on（'draw.dt'，function（）{
 var $ allSerialNumbers = $（'。box-electrode'）; //这是所有行的动作按钮/ ID的列表
 
 $（'＃electrodes li'）each（function（i ，li）{//这是ID与我比较的列表
 var $ id = $（li）.data（'id'）; 
 for（var index = 0; index< ; $ allSerialNumbers.length; index ++）{
 if（$ id == $ allSerialNumbers.eq（index）.attr（'data-id'））{//对于我的ID列表中的每个项目，全部运行行，看看是否有任何Action Button ID匹配列表
上的任何一个$（'。box-electrode'）。eq（index）.remove（）; //如果它们匹配，删除该操作按钮
} 
} 
}）
}）; 
  

解决方案

我不是JQuery的专家，但可以最后一行中的 remove（）重新调整列表的大小，以便以前在索引1处的元素现在处于索引0，当您在增加索引？

I have a page that builds a table using DataTables, and each row has an Action Button that adds some data (an ID, just an int) from that row to a list. To keep users from clicking each action button multiple times, I made it so a row's button is removed the first time you click it. This worked great until I realized the buttons come back if you switch to the next page of the table and then switch back to the first page.

To fix this, I wrote some JS to compare each row to my list of data, and if that row's data is already in the list, it removes that row's action button. This happens each time the table is reloaded (for example, when you switch to a different page of the table and back again) using DataTable's draw.dt function.

The problem is, when I switch pages and the JavaScript goes to work removing buttons, for some reason it skips every other row. For example, if I click (thus removing) the first three rows' action buttons, switch pages and switch back, my JS removes the action buttons on row 1, 3, and 5 instead of rows 1, 2, and 3. It's so consistent that it has to be some kind of simple looping error due to my sloppy JS skills, but I can't find it.

Here is the code:

$(document).on('draw.dt', function () {
    var $allSerialNumbers = $('.box-electrode'); // This is a list of all the rows' action buttons / ID's

    $('#electrodes li').each(function (i, li) { // This is the list of ID's I'm comparing to
        var $id = $(li).data('id');
        for(var index = 0; index < $allSerialNumbers.length; index++){
            if($id == $allSerialNumbers.eq(index).attr('data-id')){ // For each item in my ID list, run through all the rows and see if any Action Button ID's match any on the list
                $('.box-electrode').eq(index).remove(); // If they do match, remove that Action Button 
            }
        }
    })
});

解决方案

I'm not an expert on JQuery, but could remove() in your last line be re-sizing the list so that the element which used to be at index 1 is now at index 0, causing you to skip it when you increment the index?

这篇关于在JavaScript中从表中删除操作按钮时的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！