js генератор кнопок с функциями - PullRequest
Новая
       102

js генератор кнопок с функциями

0 голосов
/ 04 мая 2020

Я получил код для генерации таблицы с нужными мне кнопками, но я также хочу получить функцию "onlick="cell_id(" + j +"," + i ")" в элементе <button>, используя js.

j и * Переменные 1006 * предназначены для обозначения строки и столбца, откуда был получен клик, а также для создания таблицы.

код: 

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)
}

код из { ссылка }

1 Ответ

0 голосов
/ 04 мая 2020

Вы можете прикрепить слушателя к каждому элементу кнопки: 

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 на кнопке, а затем использовать одно событие щелчка по всей таблице. Вы можете отфильтровать события, чтобы проверить, пришли ли они от «источника» кнопки Я оставлю это на ваше усмотрение, если вы захотите воспользоваться этим вариантом.

...