1

I got the code to generate the table with buttons i wanted, but i also want to get a "onlick="cell_id(" + j +"," + i ")" function within the <button> element using js.

The j and i variables are to mark the row and column where the click came from and also used to create the table.

the code: 

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

code from https://stackoverflow.com/a/61549235/12825970

Improve this question
5
  • What is the problem here? Commented May 4, 2020 at 11:40
  • @VLAZ i need help with using js to get a function in a button element Commented May 4, 2020 at 11:42
  • I don't quite understand what the problem/question is, but I have a feeling you might be looking for addEventListener(). Commented May 4, 2020 at 11:44
  • button.addEventListener('onclick') track the button sense it has no id or anything to id it form the rest of the buttons Commented May 4, 2020 at 11:48
  • cellIndex on table cell elements and rowIndex on table row elements exist. So this whole thing can be done by adding one click handler to the table, checking if the event target was a button, and if so going up to the parent cell and row, and getting the respective index values from there - jsfiddle.net/7vdLekz2 Commented May 4, 2020 at 12:11

1 Answer 1

Reset to default
1

You can attach a listener to each button element:

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

This approach works, but is expensive if you have a lot of buttons. For a more advanced approach, you can store the i and j as data attributes on the button, then use a single click event on the entire table. You can filter the events to check if they came from a "source" button. I'll leave that up to you if it's an option you want to pursue.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

can it track the button it came from, its important for what im using it for
Updated the post to also pass the button.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.