Question

我想让表格单元格的内容在单击时发生变化。这是页面来源：

function cellClick(c) {
  alert(c + " is {" + document.getElementById(c).innerHtml + "}");
  document.getElementById(c).innerHtml = "<b>It Works</b>";
  alert(c + " is now {" + document.getElementById(c).innerHtml + "}");
}

<table border="1">
  <tr>
    <td id="Cell1" onclick='cellClick("Cell1")'>
      Row 1
    </td>
  </tr>
  <tr>
    <td id='Cell2' onclick="cellClick('Cell2')">
      Row 2
    </td>
  </tr>
</table>

是的，我知道Cell1和Cell2中的调用会切换单引号和双引号；我也在测试。

无论如何，我第一次单击一个单元格时，其innerHtml值将返回“ undefined”（而不是“ Row 1”或“ Row 2”），并在函数中进行设置后，将显示设置值；当我再次单击该单元格时，该函数先前设置的值就在那里。但是，页面本身的值永远不会改变。

已经尝试过：

Firefox（64位）65.0.1

IE 11.2791（不会显示警报）

边缘38.14393

但是他们所有人都做同样的事情-设置了值，但是页面没有变化。

我想念什么？

Answer 1

您的代码不起作用，因为在innerHTML情况下。

第二，将id添加到每个td并使用onclick传递参数将很麻烦。因此，您可以使用querySelectorAll然后对其进行迭代，并向其中添加click事件监听器。点击后，从目标中获取innerHTML并对其进行提醒

function cellClick(c) {
  alert(c + " is {" + document.getElementById(c).innerHTML + "}");

  document.getElementById(c).innerHtml = "<b>It Works</b>";

  alert(c + " is now {" + document.getElementById(c).innerHTML + "}");
}

<table border="1">
  <tr>
    <td id="Cell1" onclick='cellClick("Cell1")'>
      Row 1
    </td>
  </tr>
  <tr>
    <td id='Cell2' onclick="cellClick('Cell2')">
      Row 2
    </td>
  </tr>
</table>

document.querySelectorAll('td').forEach((cell) => {
  cell.addEventListener('click', (e) => {
    let text = e.target.innerHTML.trim();
    alert(text)

  })
})

<table border="1">
  <tr>
    <td>
      Row 1
    </td>
  </tr>
  <tr>
    <td>
      Row 2
    </td>
  </tr>
</table>

document.querySelectorAll('td').forEach((cell) => {
  cell.addEventListener('click', function(e) {
    let text = this.innerHTML.trim();
    alert(text)

  })
})

<table border="1">
  <tr>
    <td>
      Row 1
    </td>
  </tr>
  <tr>
    <td>
      Row 2
    </td>
  </tr>
</table>

Answer 2

您可以在此处使用事件委托的好处。

它将在内存中创建较少数量的事件处理程序。
它具有可伸缩性，并且将具有更好的性能。

这是它的代码段。

function cellClick(e) {
  if (e.target.tagName === "TD") { //e.target.tagname.toLowerCase() === "td")
    console.log(e.target.innerHTML);
    e.target.innerHTML = "<b>It Works</b>"
  }
}

<table border="1" onclick='cellClick(event)'>
  <tr>
    <td id="Cell1">
      Row 1
    </td>
  </tr>
  <tr>
    <td id='Cell2'>
      Row 2
    </td>
  </tr>
</table>

谢谢！

Answer 3

您写得很差的innerHtml innerHTML

更改innerHTML不会更新页面

3 个答案: