JS table generator with buttons

Question

I found this answer on the website and used it as a base for my own code.

I was trying to get the buttons to render within the table but it just came up as text and not rendering as a element on the page like I wanted too.

Here's the code that was using here:

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 btn = "<button>" + j +"-"+i+"</button>"
      var cellText = document.createTextNode(btn);

      cell.appendChild(cellText);
      row.appendChild(cell);
    }
    tblBody.appendChild(row);
  }
  tbl.appendChild(tblBody);
  body.appendChild(tbl);
  tbl.setAttribute("border", "2");
}

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

i get the problem now i look at it – Joe McMullan May 04 '20 at 11:11 — Joe McMullan, May 04 '20 at 11:11

score 3 · Accepted Answer · edited Sep 21 '20 at 21:15

3

createTextNode() creates a text node, as the name says. If you have markup in it, it will be shown literally.

You should have created a button node, and set its text to the variables like this example below.

    for (var i = 0; i <10; i++) {
      var cell = document.createElement("td");
      var btn = document.createElement("button");
      btn.innerText = j + "-" + i;
      cell.appendChild(btn);
      row.appendChild(cell);
    }

edited Sep 21 '20 at 21:15

Joe McMullan

75
1
12

answered May 01 '20 at 19:12

Barmar

669,327
51
454
560

`createElemebt` – epascarello May 04 '20 at 13:34
Thanks, I must have had a shot of Novacaine when I was coding that :) – Barmar May 04 '20 at 15:37

score 0 · Answer 2 · answered May 01 '20 at 19:14

You need to create a button node and then append it.

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){
  msg('x:'+x+ ' y:'+y)
}

JS table generator with buttons

2 Answers2

Linked