用户输入的动态表，单元格id作为网格引用

Dynamic table from user input with cell id as grid reference

本文关键字：id 网格 引用 单元格 输入 动态 用户      更新时间：2024-04-19

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

该表反映了一个网格，因此我希望每个单元格的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开发它，但我对这种语言很陌生，而且我在编码它时遇到了麻烦

任何人能提供的帮助都将不胜感激。

试试这个：

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

工作示例

试试这样的东西：

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()构建表

此处的工作示例

相关文章：