Question

我有一个表，每行都需要一个点击功能。

我想将行号和文本发送到另一个函数。

当我点击一行时，它会为我提供正确的文本，但对于每一行，它会给出总行数。我如何给出点击的当前行的编号？

var table = document.getElementById("orders");
if (table != null) {
    for (var i = 0; i < table.rows.length; i++) {
        for (var j = 0; j < table.rows[i].cells.length; j++)
        table.rows[i].cells[j].onclick = function () {
            tableText(this, i);
        };
    }
}

function tableText(tableCell, i) {
    alert(tableCell.innerHTML + i);
}

Answer 1

您遇到了JavaScript var范围界定的常见问题。问题是变量是for循环本身的范围而不是块。这意味着变量随着for的每次进一步迭代而不断变化。

您可以使用ES6 let轻松解决此问题：

const table = document.getElementById("orders");
if (table != null) {
    for (let i = 0; i < table.rows.length; i++) {
        for (let j = 0; j < table.rows[i].cells.length; j++)
        table.rows[i].cells[j].onclick = function () {
            tableText(this, i);
        };
    }
}

（我改变了其他变量以获得最佳实践，但这并不是必需的。）

如果您不能使用ES6，您可以回退到这样的自执行功能：

for (var i = 0; i < table.rows.length; i++) {
    for (var j = 0; j < table.rows[i].cells.length; j++) {
        table.rows[i].cells[j].onclick = (function (i) {
           return function () {
              tableText(this, i);
           };
        })(i);
    }
}

不是很好。

另请参阅：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let#Cleaner_code_in_inner_functions

Answer 2

如果不深入讨论，我怀疑alert电话会同时评估innerHTML和i，以致您{{1}上的号码不正确}}。

我也会改变：

alert

明确说出

tableText(this, i);

只是为了避免任何可能的混淆。 tableText(table.rows[i].cells[j], i);可能正在评估javascript / html文件本身

点击时将行号发送到另一个功能

2 个答案: