JS：将 onclick 函数添加到 table 单元格

Question

我创建了一个最小示例：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"。为什么它不是这样工作的？

Answer 1

你只需要这样做。 <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;

Answer 2

它不起作用的原因是 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;
  }

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

JS：将 onclick 函数添加到 table 单元格

JS: add onclick function to table cell

javascript

html-table

add

onclick