如何动态生成一个由Button填充的表格?

时间:2019-07-08 12:15:20

标签: javascript html

对于我的实习,我需要创建一个包含Buttons的表。 (表的大小可以由用户更改)。

我设法自定义尺寸(在另一页上),但是未能为此创建轴和按钮。

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

我已经尝试过将xAxis重命名,但是那也没有用:


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];
                }
            }

示例: Example

2 个答案:

答案 0 :(得分:1)

FrameLayout,

答案 1 :(得分:0)

在javascript中,逻辑很简单。 一个for循环!

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 ......"
  }
}
相关问题