Question

I am trying to create a table that is generated by user input data.

The table is reflecting a grid therfore I want the id of each cell to be the co ordinate of that grid. So the id of the bottom left cell would be id00. The top right cell id would be the maximum size of the grid that the user has entered.

So for example if data entered; x value=3; y value=3
this would produce the following table:

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

I have identified the basic concept for the code as you can see below:

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

I want to develop it in Javascript but I am new to the language and I am having trouble coding it.

Any help anyone could provide would be greatly appreciated.

Answer 1

Try something like this :

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

Uses document.createElement(), element.appendChild() and element.insertBefore() to build the table

Working example here