来自用户输入的动态表格，以单元格 ID 作为网格参考

Question

我正在尝试创建一个由用户输入数据生成的表。

表格反映了一个网格，因此我希望每个单元格的 id 是该网格的坐标。所以左下角单元格的 id 将是 id00。右上角的单元格 id 将是用户输入的网格的最大尺寸。

例如，如果输入了数据； x值=3； y值=3 这将产生下表：

<table>
<tr><td id="id03"></td><td id="id13"></td><td id="id23"></td><td id="id33"></td></tr>
<tr><td id="id02"></td><td id="id12"></td><td id="id22"></td><td id="id32"></td></tr>    
<tr><td id="id01"></td><td id="id11"></td><td id="id21"></td><td id="id31"></td></tr>
<tr><td id="id00"></td><td id="id10"></td><td id="id20"></td><td id="id30"></td></tr>
</table>

我已经确定了代码的基本概念，如下所示：

<table>
Create a loop,  initial value of r= 0; maximum value of r=y
r =0 <tr> create a secondary  loop, initial value of n=0; maximum value of n = x;  r remains  constant for row
n=0; r= 0 <td  id = “id” + “[x- (x-n)]” +   “[y-r]” > </td>
….
n=3; r= 0* <td id = “id” + “[x- (x-n)]” +   “[y-r]” > </td>
</tr>

….

r =3 <tr> n=0; r= 3 <td  id = “id” + “[x- (x-n)]” +   “[y-r]” > </td>
….
n=3; r= 3<td id = “id” + “[x- (x-n)]” +   “[y-r]” > </td>
</tr>
</table>

我想用 Javascript 开发它，但我是该语言的新手，并且在编码时遇到了麻烦。

任何人都可以提供任何帮助将不胜感激。

Answer 1

试试这个：

var x = 3; // value from input
var y = 4; // value from input

var table = document.getElementById("myTable");
for(var i = 0; i < y; i++) {
    var row = table.insertRow(-1);
    for(var j = 0; j < x; j++) {
        var cell = row.insertCell(-1);
        cell.id = "id" + (j) + (y - i - 1);
        cell.innerHTML = cell.id;        
    }
}
​

Working example

Answer 2

试试这样的：

var rows = parseInt(document.getElementById('rows').value,10); // get input value
var cols = parseInt(document.getElementById('cols').value,10); // get input value
var table = document.createElement('table'); // create table element
table.border = "1"; // set some attributes
var prevrow; // used to store previous row element
for (var r = 0; r < (rows+1); r++) {  // loop rows
    var row = document.createElement('tr'); // create tr
    for (var c = 0; c < (cols+1); c++) { // loop cols
        var col = document.createElement('td'); // create td
        col.id = 'id' + r + c;  // set id of tr
        col.innerHTML = col.id; // add some text
        row.appendChild(col); // append td to tr
    }
    // if first tr then create append to table else insert before previous tr
    if (prevrow) {
        table.insertBefore(row, prevrow);
    } else {
        table.appendChild(row);
    }
    // store newly create tr
    prevrow = row;
}
// append the new table to the output div
document.getElementById('output').appendChild(table);

使用document.createElement()、element.appendChild()和element.insertBefore()建表

Working example here