0

I have a .js file that creates a 4x4 table that way:

document.write('<div align="center"><table>');
for (var a = 0; a < 4; a++) {
    document.write('<tr>');
    for (var b = 0; b < 4; b++) {
        document.write('<td align="center" id="t' +((4 * a) + b) + '"></td>');
    }
    document.write('<\/tr>');
}

What if I want to add one column and one row to that table after the page is loaded? In other terms, I'm looking for the same function but the "4" is a variable and I get its value from a checkbox.

(I didn't put that code in a proper function because every time I call document.write in a function, the page goes blank).

Maybe there is another way to use it in a function without document.write and that's what I'm looking for.

So I tried to concat all the '' strings and apply them to the .innerHTML of the table, but it didn't work. Any ideas why? And how can I correct the bug?

Thank you. (No jQuery answers please...)

user3787941
  • 33
  • 1
  • 3
  • 1
    You might find this answer useful: http://stackoverflow.com/questions/18333427/how-to-insert-row-in-html-table-body-in-javascript –  Jul 16 '14 at 23:09
  • 1
    Basically using document.write is not such a good idea. – David Refoua Jul 16 '14 at 23:10
  • 1
    By just reading the title, as an alternative you can use `document.body.innerHTML="stuff"`... Although I'm not sure that resolves the issue you're having. –  Jul 16 '14 at 23:12

2 Answers2

1

You can use the standard document methods. Documentation can be found on MDN

CSS

table {
    width: 100px;
    height: 100px;
    border-style: solid;
    border-width: 3px;
}
td {
    width: 25px;
    height: 25px;
    border-style: solid;
    border-width: 1px;
}

Javascript

var table = document.createElement('table'),
    tHead = document.createElement('thead'),
    tBody = document.createElement('tbody'),
    row,
    cell,
    a,
    b;

table.align = 'center';
table.appendChild(tHead);
table.appendChild(tBody);
for (a = 0; a <= 3; a += 1) {
    row = tBody.insertRow(-1);
    for (b = 0; b <= 3; b += 1) {
        cell = row.insertCell(-1);
        cell.id = (4 * a) + b;
        cell.align = 'center';
        cell.appendChild(document.createTextNode(cell.id));
    }
}

document.body.appendChild(table);

On jsFiddle

Xotic750
  • 22,914
  • 8
  • 57
  • 79
  • This doesn't seem to be working if I insert it in a function. I want to be able to change the number of rows and columns – user3787941 Jul 16 '14 at 23:58
  • Provide a jsFiddle of your changes so I can see where you have gone wrong. – Xotic750 Jul 17 '14 at 00:00
  • Thanks, that's working! Then to change the content of each cell, how can I access a cell (outside the function addTable) in order to call appendChild? – user3787941 Jul 17 '14 at 00:26
  • [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById) – Xotic750 Jul 17 '14 at 00:29
-1
var main = document.getElementById("table");
document.write('<div align="center" id="table"><table>');
    for (var a = 0; a < 4; a++) {
main.appendChild('<tr>');
    for (var b = 0; b < 4; b++) {
    main.appendChild('<td align="center" id="t' +((4 * a) + b) + '"></td>');
    }
main.appendChild('<\/tr>');
}

I'm basically just switching document.write for appendChild(). Does that work for you?

sverrirarnors
  • 89
  • 1
  • 8