带功能的js按钮生成器

Question

我得到了生成我想要的带按钮的表格的代码，但我也想得到一个带按钮的表格。"onlick="cell_id(" + j +"," + i ")" 内的功能 <button> 元素使用js。

的 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.coma6154923512825970。

Answer 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 属性，然后在整个表格上使用单次点击事件。你可以过滤事件，检查它们是否来自于一个 "源 "按钮。如果这是你想追求的选项，我就留给你了。