PDA

View Full Version : dynamic table - colspan problem

Kirl
Sep 21st, 2007, 12:44 AM
I'm writing a table to the document with the following function.

for(var i=0; i<=tableHeight; i++)
{
rowEl = document.createElement("TR");
for(var j=1; j<=tableWidth; j++)
{
if(i == 0 && (j % 8)==0) // 1st row, 8th cell
{
count++;
cellEl = document.createElement("TD");
cellEl.id = "p" +count+ "Out";
//cellEl.colspan = 4; <---- NOT WORKING!
}
else
{
cellEl = document.createElement("TD");
if(i != 0)
cellEl.style = "background-color: white;";
}

//cellEl.innerHTML = "c" +i+ "," +j;
rowEl.appendChild(cellEl);
}
tableEl.appendChild(rowEl);
}
document.body.appendChild(tableEl);

On the fist row, I want every eigth cell to have a colspan of 4,but I'm not sure how to do it from within this function (before the table is actually written). I tried a few diffrent aproaches.

The function itself is performing fine, it writes the table and sets the id of every eighth cell as it's supposed to, I only need to colspan to work.

Any ideas?

Sep 21st, 2007, 02:05 AM
I got this to work for me. Is this what you wanted?

for(var i=0; i<=tableHeight; i++)
{
rowEl = document.createElement("TR");
for(var j=0; j<tableWidth; j++)
{
if(i == 0 && (j == 8)) // 1st row, 8th cell
{
count++;
cellEl = document.createElement("TD");
cellEl.id = "p" +count+ "Out";
cellEl.colSpan = 4;
cellEl.innerHTML = "XX(c" +i+ "," +j+ ")";
rowEl.appendChild(cellEl);
j = j + 3;
}
else if(j == 9 || j == 10 || j == 11)
{
cellEl = document.createElement("TD");
cellEl.innerHTML = "(r" +i+ ",c" +j+ ")";
rowEl.appendChild(cellEl);
}
else
{
cellEl = document.createElement("TD");
//if(i != 0)
//cellEl.style = "background-color: white;";
cellEl.innerHTML = "(r" +i+ ",c" +j+ ")";
rowEl.appendChild(cellEl);
}

}
tableEl.appendChild(rowEl);
}
document.body.appendChild(tableEl);

Kirl
Sep 21st, 2007, 12:56 PM
Great, thanks!

It seems you could have gotten away by only changing the s in colspan to a capital, the extra stuff wasn't even necessary. :)

Unfortunatly For some reason FF seems to throw an error, about the line where I set the cell.style to "background-color: white;". The error console says: "setting a property that only has a getter"?

Any ideas, how to please FF as well?

rnd me
Sep 21st, 2007, 03:32 PM
cellEl.style.backgroundColor= "white"

Kirl
Sep 21st, 2007, 11:57 PM
thanks rnd...

Unfortunatly, there is some seriously strange stuff going on in the diffrent browsers I can't get this thing to work like it should.

- IE doesn't seem to add the page to the document, it does seem to create a table object behind the scenes
- Opera seems to create the table correctly and also replaces it once correctly, then it stops deleting previous tables and simply adds new ones.
- FF doesn't delete the tables

So I have uploaded a simple testpage: www.kirl.nl/DomTableTest.html (http://www.kirl.nl/DomTableTest.html).

I really need some sort of cross browser solution...

rnd me
Sep 22nd, 2007, 03:25 AM
the browsers you mentioned all support the .innerHTML property, which you partially use.

i would think it easier to build strings and inject the whole table into the container that way.

also not sure exactly what your var tableHeight is, but your loop might be goin '1 over' when using your syntax: for(var i=0; i<=tableHeight; i++);

since you start at zero, typically you want to stop at (length-1), aka x<length.

Kirl
Sep 23rd, 2007, 01:27 AM
I previously used innerHTML to fill the rows, until I noticed it didn't work on another machine (not particularly old, but offline).

I looked into this DOM stuff because I hoped it was somewhat more reliable/flexible. I'm sure IE should be capable of appending the table to the body so I think I'm still doing something wrong here.

I believe the loop was supposed to do one xtra, but I'm not sure why anymore, I'll look into that. Thanks for noticing.

Sep 26th, 2007, 07:24 PM
Have you tried using the TBODY element yet?

I have seen before that results aren't the same without it. Something like this:

var table = document.createElement("TABLE");
var tbody = document.createElement("TBODY");
var row = document.createElement("TR");
var cell = document.createElement("TD");

row.appendChild(cell);
tbody.appendChild(row);
table.appendChild(tbody);