jQuery使用克隆数据过滤表

Question

我遇到了一些似乎无法追踪的问题。

操作顺序：

1. PHP渲染表到页面
2. jQuery克隆表并将其存储为全局变量
3. 当用户单击过滤器按钮时，它将全局变量附加到DOM并删除不符合过滤条件的行。
4. 不知何故，这会影响全局变量，因为当我通过不同的过滤器时，它最终不再追加数据，就好像它从我不断追加和操作的全局变量中删除行一样。

我的表有这样的行：

<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(),

应该解决问题。 我没有测试。