javascript - 输入单元格时存储单元格的值

Question

这个问题已经有答案了:

How to generate event handlers with loop in Javascript? [duplicate] (3 个回答)

已关闭 8 年前。

我有一个用于创建表格行的 JavaScript 代码:

function create_row() {
    var table = document.getElementById("main_table");
    var n = table.rows.length;
    var m = table.rows[0].cells.length;
    var row = table.insertRow(n);
    for (i=2; i<m; i++) {
        var cell = row.insertCell(i);
        cell.innerHTML = "<input size=4>";
        cell.addEventListener("change", function () {
            console.log("Column of a cell: " + cell.cellIndex);
        })
    }
}
document.getElementById('create_row').onclick = create_row;

我的意图是，当用户在单元格中键入内容时，我想打印该值。然而，cellIndex始终是我的表格中的列数(或 m )(据我所知，因为在创建所有单元格后单击单元格，因此 i 达到 m )。

当单元格的内容发生更改时，如何接收行、列和单元格的值？

Answer 1

哦，Javascript 闭包。试试这个:

function create_row() {
  var table = document.getElementById("main_table");
  var n = table.rows.length;
  var m = table.rows[0].cells.length;
  var row = table.insertRow(n);
  for (i=2; i<m; i++) {
    create_cell(i);
  }
}

function create_cell(){
  var cell = row.insertCell(i);
  cell.innerHTML = "<input size=4>";
  cell.addEventListener("change", function () {
    console.log("Column of a cell: " + cell.cellIndex);
  })
}

document.getElementById('create_row').onclick = create_row;