How to dynamicly generate a Table, filled with Buttons?

Question

For my Internship I need to create a table filled with Buttons. (The size from the table can be changed by the user).

I have managed to customize the size (which is on another page) but I have failed to create the Axis and the Buttons for this.

<div id="Table"></div>


function addTable() {


            var myTableDiv = document.getElementById("Table");
            var table = document.createElement('TABLE');
            table.border = '1';
            var tableBody = document.createElement('TBODY');
            table.appendChild(tableBody);

            for (var i = 0; i < localStorage.getItem("YWert"); i++) {
                var tr = document.createElement('TR');
                tableBody.appendChild(tr);


                for (var j = 0; j < localStorage.getItem("XWert"); j++) {
                    var td = document.createElement('TD');
                    td.width = '75';
                    td.appendChild(document.createTextNode("Cell " + i + "," + j));
                    tr.appendChild(td);
                }
            }



            myTableDiv.appendChild(table);

I have tried this to rename the xAxis but that did also not work:


var abc = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
            var x = document.getElementById("Table").rows[0].cells;
            for (var k = 1; k < localStorage.getItem("XWert"); k++) {
                for (var l = 0; l < abc.length; l++) {
                    x[k].innerHTML = abc[l];
                }
            }

Exampe: Example

Note that `getItem` always returns a string. While it may work to coerce that string to a number in this case, you should be aware of [how JavaScript coerces types](https://stackoverflow.com/a/54567595/215552) to ensure it works correctly. — Heretic Monkey, Jul 08 '19 at 12:27
For the question, you're creating `table`, `tbody`, `tr`, and `td` elements. Try creating `button` elements in the same manner... — Heretic Monkey, Jul 08 '19 at 12:28

score 1 · Accepted Answer · answered Jul 08 '19 at 12:34

function addTable() {
    var abc = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    var YWert_len = 5;
    var XWert_len = abc.length;
    var myTableDiv = document.getElementById("tbl");
    var table = document.createElement('TABLE');
    table.border = '1';
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);


    for (var i = 0; i <= YWert_len; i++) {
        var tr = document.createElement('TR');
        tableBody.appendChild(tr);


        for (var j = 0; j < XWert_len; j++) {
            var td = document.createElement('TD');
            td.width = '75';
            if(i==0)
            {
                td.appendChild(document.createTextNode(abc[j]));
            }
            else
            {
                var button = document.createElement("button");
                button.innerHTML = "Button"+i+j;
                td.appendChild(button);
            }
            tr.appendChild(td);
        }
    }

    myTableDiv.appendChild(table);
}
```

score 0 · Answer 2 · answered Jul 08 '19 at 12:39

the logic is simple in javascript. a for loop!

for (var y; y < yourUpperLimitHeight; y++){
  for (var x; x < yourUpperLimitWidth; x++){
     //here x is the number of width cells and y the number of height cells. Create a function that takes two parameters, height and width, and in a double for loop, draw a table on the screen. 
    document.getElementById('YourTable').innerHTML += "<td ......"
  }
}

How to dynamicly generate a Table, filled with Buttons?

2 Answers2