javascript - 抓取元素ID

Question

我正在创建一个带有 td id 的表，如下所示(id=concatenate(row,column)):

function createTable() {
  document.body.innerHTML += '<table border="1" id="mytable"></table>';
  for (var i = 0; i < 4; i++) {
    document.getElementById("mytable").innerHTML += '<table border="1"><tr id="row' + i + '"></tr></table>';
    for (var k = 0; k < 4; k++) {
      document.getElementById("row" + i).innerHTML += '<td id=' + i + k + '></td>';
    }
  }
}

然后我想根据每个单元格的值是否>5或更低来更改其背景颜色。这是我为每个单元格调用的 onclick 函数:

function clickable() {
  var table = document.getElementById("mytable");
  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 () { colorChange(i, j); };
    }
  }
}
function colorChange(i, j) {
  if (document.getElementById("" + i + j).innerHTML > 5) {
    document.getElementById("" + i + j).style.backgroundColor = "green";
  }
}

但是调试器在尝试访问 colorChange 第一行中的 null 属性时捕获了 typeError，这意味着我获取 elementID 的方法是错误的。获取元素 ID 的正确方法是什么？

Answer 1

这是因为你使用 vars 作为循环变量，所以点击时总是 i=4 和 j=4。只需将它们替换为 let:

function clickable() {
  var table = document.getElementById("mytable");
  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 () { colorChange(i, j); };
    }
  }
}