抓取elementID

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); };

    }

  }

}

Answer 2

您不需要任何i和j业务。只需直接选择单元格元素并循环遍历它们以添加事件侦听器，使用querySelectorAll，按照下面的演示。

注意你提到你想“改变每个单元格的背景颜色取决于它的值是> 5还是低于” ......但是你如何定义“值”？目前还不清楚。在 colorChange 函数中，您尝试使用单元格的“innerHTML”测试值，但您的单元格无论如何都没有任何内容，因此它永远不会工作。

因此，对于演示的目的，我以为你打算填充细胞的价值观i和k，然后解释这些作为一个单一的数字，当你做colorChange测试。

也<table border="1">需要删除。您不能在另一个表中直接拥有一个表。无论如何，这不是必需的。

function createTable() {

  document.body.innerHTML += '<table border="1" id="mytable"></table>';

  for (var i = 0; i < 4; i++) {

    document.getElementById("mytable").innerHTML += '<tr id="row' + i + '"></tr></table>';

    for (var k = 0; k < 4; k++) {

      document.getElementById("row" + i).innerHTML += '<td id=' + i + k + '>' + i + k + '</td>';

    }

  }

}

function clickable() {

  var cells = document.querySelectorAll("#mytable td");

  cells.forEach(function(cell) {

    cell.addEventListener("click", colorChange);

  });

}

function colorChange() {

  console.log(this.innerHTML);

  if (this.innerHTML > 5) {

    this.style.backgroundColor = "green";

  }

}

createTable();

clickable();

有关文档，请参阅https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll。