具有功能的js按钮生成器答案

【问题标题】：js button generator with functions具有功能的js按钮生成器
【发布时间】：2020-05-04 22:13:08
【问题描述】：

我得到了生成带有我想要的按钮的表格的代码，但我也想使用 js 在<button> 元素中获取"onlick="cell_id(" + j +"," + i ")" 函数。

j 和i 变量用于标记点击来自的行和列，也用于创建表格。

代码：

function tableCreate() {
  var body = document.getElementsByTagName("body")[0];

  var tbl = document.createElement("table");
  var tblBody = document.createElement("tbody");

  for (var j = 0; j <= 10; j++) {
    var row = document.createElement("tr");

    for (var i = 0; i <10; i++) {
      var cell = document.createElement("td");
      var button = document.createElement("button");
      button.innerHTML = j +"-"+i;
      cell.appendChild(button);
      row.appendChild(cell);
    }
    tblBody.appendChild(row);
  }
  tbl.appendChild(tblBody);
  body.appendChild(tbl);
  tbl.setAttribute("border", "2");
}

function cell_id(x,y){
  window.alert('x:'+x+ ' y:'+y)
}

来自https://stackoverflow.com/a/61549235/12825970的代码

【问题讨论】：

这里有什么问题？
@VLAZ 我在使用 js 获取按钮元素中的函数方面需要帮助
我不太明白问题是什么，但我感觉您可能正在寻找addEventListener()。
button.addEventListener('onclick') 跟踪按钮感觉它没有 id 或任何其他按钮来识别它
cellIndex 在表格单元格元素上和rowIndex 在表格行元素上存在。所以这整个事情可以通过向表中添加 one 点击处理程序来完成，检查事件目标是否为button，如果是，则向上到父单元格和行，并获取相应的从那里索引值 - jsfiddle.net/7vdLekz2

标签： javascript loops for-loop button

【解决方案1】：

您可以为每个按钮元素附加一个监听器：

function tableCreate() {
  var body = document.getElementsByTagName("body")[0];

  var tbl = document.createElement("table");
  var tblBody = document.createElement("tbody");

  for (var j = 0; j <= 10; j++) {
    var row = document.createElement("tr");

    for (var i = 0; i <10; i++) {
      var cell = document.createElement("td");
      var button = document.createElement("button");
      button.innerHTML = j +"-"+i;
      setupListener(button);
      cell.appendChild(button);
      row.appendChild(cell);
    }
    tblBody.appendChild(row);
  }
  tbl.appendChild(tblBody);
  body.appendChild(tbl);
  tbl.setAttribute("border", "2");
}

function setupListener(button, i, j) {
  button.addEventListener('click', () => {
    cell_id(button, i, j);
  });
}

function cell_id(button, x, y){
  msg('x:'+x+ ' y:'+y)
}

这种方法有效，但如果您有很多按钮，则成本很高。对于更高级的方法，您可以将i 和j 存储为按钮上的data 属性，然后在整个表格上使用单击事件。您可以过滤事件以检查它们是否来自“源”按钮。如果你想选择，我会留给你。

【讨论】：

它可以跟踪它来自的按钮，它对我使用它的目的很重要
更新了帖子也传递了按钮。