Question

我遇到了一些我无法追查的问题。

运营顺序：

PHP将表格呈现到页面
jQuery克隆表并将其存储为全局变量
当用户点击过滤器按钮时，它会将全局变量附加到DOM并删除不符合过滤条件的行。
不知何故，这会影响全局变量，因为当我浏览不同的过滤器时，它最终不再附加数据，就像它从全局变量中删除行一样，我一直在追加和操纵。

我的表有这样的行：

<tr data-area-count="2" data-region-count="2" data-regions="North America, EMEA" data-areas="Area 1, Area 2">

我的jQuery：

// Global Vars
var results,
    oTable;

$(function() {
  results = $('[name=resultsTable]').clone();
});

用户可以通过页面上的几个按钮过滤数据。当他们点击按钮时，这是运行的功能：

// Depending on which region needs to be shown, toggle here.
function filterRegion(region) {

var data = results,
    tempArray = Array(),
    tempAreas,
    tempRegions;


// Based on the region/option we selected..
switch (region) {
     case 'EMEA':

        // Append the data to the dom
        $('.res').empty().append(data).find('table').addClass('dt');

        // Loop over the rows
        $('.res').find('.results tr').each(function() {
            // Collect the values of each of the rows we interate over
            tempRegions = $(this).data('regions');
            tempArray = tempRegions.split(", ");
            tempRow = $(this);

            // Check to see if this case value exists in the array
            if (jQuery.inArray('EMEA', tempArray) == -1) {
                // the region is not in the array, remove the row
                tempRow.remove();
            };

        });

        break;
}

在上面的陈述中，我希望它附加最初加载的表的原始未经修改的版本，然后如果EMEA不在data-regions列表中，它将删除所有DOM中表格中的行数。

然而，它似乎正在改变全局变量中的数据，因为当我在不同的过滤器之间切换回来时，我最终没有将数据附加到DOM，因为当它击中每个时，它“删除”了所有行。过滤陈述。

我觉得我正在克隆或错误地使用克隆数据。有什么想法吗？

Answer 1

来自json追加文档（https://api.jquery.com/append/）：

如果以这种方式选择的元素被插入到DOM中其他位置的单个位置，它将被移动到目标中（未克隆）。

因此，我认为在您的append(data)调用中，您可以从全局结果变量中移动数据。然后你从中删除元素（修改全局结果DOM对象）。相反，你必须再次克隆它。所以我想更换一行

var data = results,

与

var data = results.clone(),

应该解决问题。我没试过它。

jQuery使用克隆数据过滤表

1 个答案: