Building a table dynamically with JS?

[Craig]

Quick question.

I have HTML tables that get created on the fly. The size of
rows/columns depends on the report the user is looking at.

What I want to do is take more control over the look/feel of the
tables.

Is this possible?

 

[Martin Honnen]

Quick question.

I have HTML tables that get created on the fly. The size of
rows/columns depends on the report the user is looking at.

What I want to do is take more control over the look/feel of the
tables.

Is this possible?

Well, whether the table is static HTML or dynamically created with
script you can use both the HTML table attributes like border,
cellspacing, cellpadding as well as CSS to control the look of the table:

var table = document.createElement('table');
table.border = 1;
table.cellPadding = 10;
table.cellSpacing = 2;
var tbody = document.createElement('tbody');
for (var i = 1; i < 10; i++) {
var row = document.createElement('tr');
for (var j = 1; j < 10; j++) {
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(i + ', ' + j));
row.appendChild(cell);
}
tbody.appendChild(row);
}
table.appendChild(tbody);
document.body.appendChild(table)

 

[Craig McDermott]

Thanks for the quick reply.

I'm a bit of a novice at JS.

So what is this table actually doing, is this for 10 rows/columns?

Can you explain more so I understand.

I don't suppose I can pay you to knock this together as it will probably
take me weeks to work it out!

Regards

Craig

 

[Martin Honnen]

Craig McDermott wrote:

So what is this table actually doing, is this for 10 rows/columns?

A loop from i = 1; i < 10 yields 9 rows but of course it doesn't matter,
it is just an example to fill the table with some data, what is imported
in the example code is that you can create a table element object with
var table = document.createElement('table');
and then set
table.border
table.cellPadding
table.cellSpacing