如何为exportTableToCSV做JS变量替换？答案

【问题标题】：How to do JS variable substitution for exportTableToCSV?如何为exportTableToCSV做JS变量替换？
【发布时间】：2019-06-17 16:32:11
【问题描述】：

在我的网页中，我希望能够将多个表导出为 csv。我可以单独编写这些代码（如 this），但我的 for 循环不起作用。

// this works
$("#xx001").on('click', function (event) { exportTableToCSV.apply(this, [$('#table001'), 'export.csv']);  });
$("#xx002").on('click', function (event) { exportTableToCSV.apply(this, [$('#table002'), 'export.csv']);  });

// this fails
let myxx = "";
let mytable  = "";
for (let i = 0; i < 5; i++) {
    myxx += "xx00" + i ;
    table += "table00" + i ;
    $('#'+${myxx}).on('click', function (event) { exportTableToCSV.apply(this, [$(  '#'+${table}    ), 'export.csv']); });
});

我希望这两个表都可以导出，但使用循环时出现“找不到文件”错误。

【问题讨论】：

在您的循环中，您正在重置 myxx 和 mytable 两次。在循环外使用 Let 一次并从内部删除它..
谢谢 - 我已经相应地编辑了帖子，但仍然收到未找到的错误。

标签： javascript export-to-csv

【解决方案1】：

没有必要为此创建循环。一条 jQuery 语句可以为每个按钮绑定一个监听器。

$('.btn').on('click', function (event)...

诀窍在于apply() 需要相关表的id。这可以通过相对于被按下的特定按钮遍历 DOM 来动态提供。

如果表格元素后面跟着按钮（在链接的例子中），那么我们只需要引用前一个元素：

$('.btn').on('click', function (event) { exportTableToCSV.apply(this, [$(this).prev().attr("id"), 'export.csv']) 
});

请注意，prev() 可以接受选择器参数，因此即使表不是紧接在前面的同级元素，您也可以使用选择器来查找它，例如 prev("table")

【讨论】：

【解决方案2】：

循环内的函数将调用最后一个myxx 和table，它们在触发事件时都是005（当循环迭代到结束时，这两个变量被填充了循环的最后一个值）。

如果您需要更多关于 dafuq 正在发生的事情的解释，您应该查看这些关于闭包的文章。 article one 和 article two。那里还有很多资源，但我现在才找到这两个。

您需要像这样将正确的变量传递给它：

for (let i = 0; i < 5; i++) {
    let myxx = "xx00" + i ;
    let table = "table00" + i ;

    (function( x, t ) {

        $('#' + x ).on('click', function (event) { exportTableToCSV.apply(this, [$( '#' + t  ), 'export.csv']); });

    })( myxx, table );

};

上面的代码应该可以为你完成这项工作。

【讨论】：