Question

在我的网页中，我希望能够将多个表导出为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']); });
});

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

Answer 1

循环内部的函数将在触发事件发生时（循环迭代到结束时，以及最后的myxx和table调用最后两个005两个变量填充了loop的最后一个值。

如果您需要有关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 );

};

上面的代码应该可以为您完成工作。

Answer 2

不必为此创建循环。一条jQuery语句可以将侦听器绑定到每个按钮。

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

诀窍是apply()需要相关表的id。可以通过相对于所按下的特定按钮遍历DOM来动态地提供该信息。

如果table元素后跟按钮（如链接示例中所示），那么我们只需要引用前一个元素：

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

请注意，prev()可以接受选择器参数，因此，即使表不是紧靠其前的兄弟元素，您也可以使用选择器来查找类似prev("table")

的东西。

如何为exportTableToCSV进行JS变量替换？

2 个答案: