JS：向表格单元格添加 onclick 功能答案

【问题标题】：JS: add onclick function to table cellJS：向表格单元格添加 onclick 功能
【发布时间】：2018-04-29 23:28:26
【问题描述】：

我创建了一个最小示例：https://jsfiddle.net/n2r5t91v/

var myvalue = 20 // abbreviating how I calculate myvalue
var cell = document.getElementById("mytd");
cell.setAttribute('onclick', 'addToCell(' + myvalue + ');');

function addToCell(value) {
  var td_cell = document.getElementById("mytd");
  td_cell.value = td_cell.value + ' ' + value;
}

<table>
  <tr>
    <td id="mytd">
      test
    </td>
  </tr>
</table>

我希望<td> 单元格的值在单击时从“test”变为“test 20”。为什么它不能这样工作？

【问题讨论】：

Stackoverflow 具有与 jsfiddle 相同的功能，请在此处发布您的代码，这样我们就不必去其他网站了。创建/编辑问题时的 snipplet 按钮就是您所需要的。
为什么不使用您最喜欢的搜索引擎来寻找答案？

标签： javascript html-table onclick add

【解决方案1】：

它不起作用的原因是 jsfiddle 设置为运行 onload 所以代码实际上看起来像

window.addEventListener("load", function () {
  var myvalue = 20 // abbreviating how I calculate myvalue
  var cell = document.getElementById("mytd");
  cell.setAttribute('onclick', 'addToCell(' + myvalue + ');');

  function addToCell (value) {
    var td_cell = document.getElementById("mytd");
    td_cell.value = td_cell.value + ' ' + value;
  }
})

现在，由于您以错误的方式（使用属性）添加事件，因此该函数在全局范围内执行。所以在 onload 方法内部定义的函数不能被点击处理程序看到。

因此您要么需要将 JavaScript 设置为在主体底部运行（jsFiddle 设置），要么需要将函数设为全局，或者最好的解决方案是使用 addEventListener 以正确的方式绑定事件。

输入没有值，它们有 HTML 和文本。所以它需要是innerHTML。

  var myvalue = 20 // abbreviating how I calculate myvalue
  var cell = document.getElementById("mytd");
  cell.addEventListener('click', function () { addToCell(myvalue); });

  function addToCell(value){
    var td_cell = document.getElementById("mytd");
    td_cell.innerHTML = td_cell.innerHTML + ' ' + value;
  }

【讨论】：

我认为我没有理解您的答案的背景，我尝试阅读了多次。我不知道您所说的“设置为运行 onload”是什么意思，以及“函数（哪个？听起来像有一些“onload-function”？或者你的意思是 addToCell？）在全局范围内执行是什么意思" ?
点击 jsfiddle 上的齿轮。它具有代码运行方式的模式。默认是代码在window onload上运行。
添加属性后，onclick 会触发文档范围内的代码。因此，它着眼于事件的全局范围。由于事件是在 onload 方法内部定义的，因此它对外部不可见。范围的基本概念。

【解决方案2】：

你只需要这样做。 <td> 没有 value 属性。使用innerHTML:

var myvalue = 20;
var cell = document.getElementById("mytd");
cell.setAttribute('onclick', 'addToCell(' + myvalue + ');');

function addToCell(value) {
  var td_cell = document.getElementById("mytd");
  td_cell.innerHTML = td_cell.innerHTML + ' ' + value;
}

<table>
  <tr>
    <td id="mytd">
      test
    </td>
  </tr>
</table>

你也可以在这部分用不同的方式做：

td_cell.innerHTML += ' ' + value;

【讨论】：

TD上有value属性：看<td value="20">。现在有属性了。最好说属性。
@dfsq 当然，会重写它。
@dfsq 抱歉，我不确定。问题中<td> 中的value 到底在哪里？
@user3182532 如果您阅读了我的回答，您将了解为什么它在 jsFiddle 上不起作用。
@user3182532 阅读 epascarello 的回答，它有正确的解释。奇怪有人否决了它，实际上它是您问题的最佳和最完整的答案。

【解决方案3】：

试试这个

var myvalue = 20 // abbreviating how I calculate myvalue
var cell = document.getElementById("mytd");
//cell.setAttribute('onclick', 'addToCell(' + myvalue + ');');
cell.addEventListener('click', function() {
    addToCell(myvalue);
    });
function addToCell(value){
var td_cell = document.getElementById("mytd");
td_cell.innerHTML = td_cell.innerHTML + ' ' + value;
}

【讨论】：

解释一下，不要只说“试试这个”