469,352 Members | 2,140 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,352 developers. It's quick & easy.

Building a table dynamically with JS?

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?
Jul 23 '05 #1
3 1391


Craig wrote:
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)
--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #2
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

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #3


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

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

By using this site, you agree to our Privacy Policy and Terms of Use.