时间戳

首页 > 解决方案 > 具有功能的js按钮生成器

javascript - 具有功能的js按钮生成器

问题描述

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

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的代码

标签： javascriptloopsfor-loopbutton

解决方案

您可以将侦听器附加到每个按钮元素：

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属性存储在按钮上，然后在整个表格上使用单击事件。您可以过滤事件以检查它们是否来自“源”按钮。如果这是您想要追求的选择，我将由您决定。

推荐阅读