creating table rows on the fly

[lucidtech]

I am creating a table row and setting it's html to the html of another table row on the fly.. works great in Chrome and Firefox but I get an error in IE (go figure). Here's the code, I've set the line that is giving me the error in bold...

var tbl = document.getElementById("all_messages");
var lastRow = tbl.rows.length;
var row = tbl.insertRow(lastRow);
row.style.display = "none";
row.style.cursor = "pointer";
row.style.backgroundImage = "url(assets/dark_grey_bg.png)";
row.style.backgroundRepeat = "repeat-x";
row.innerHTML = tbl.rows[lastRow - 2].innerHTML;
row.onclick = function(){showOldMessage(this);};
var cell = row.cells[0];
cell.innerHTML = '<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="*" style="padding-left:5px;"><a href="'+res[1]+'" class="mailbox_read" style="text-decoration:none;">You</a>&nbsp;&nbsp;&nbsp;&nbsp;just testing...</td><td align="right" style="padding-right:5px;"><font color="#444444">'+res[1]+'</font></td></tr></table>';

 

[BillyRayPreachersSon]

I suggest you read this article on how to build tables dynamically:

http://msdn.microsoft.com/en-us/library/ms532998(VS.85).aspx

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[BillyRayPreachersSon]

I should have posted the relevant part from that document as well:

because of the specific structure required by tables, the innerText and innerHTML properties of the table and tr objects are read-only. To insert rows and cells, change the contents and attributes of the table, or resize table elements, you must use the DOM.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[lucidtech]

After some research (thank you for the posts regardless) I got this, bold line replaced and shown in bold :

var tbl = document.getElementById("all_messages");
var lastRow = tbl.rows.length;
var row = tbl.insertRow(lastRow);
row.style.display = "none";
row.style.cursor = "pointer";
row.style.backgroundImage = "url(assets/dark_grey_bg.png)";
row.style.backgroundRepeat = "repeat-x";
var newCell;
newCell = row.insertCell(0);
newCell.innerHTML = tbl.rows[lastRow - 1].cells[0].innerHTML;
newCell.style.textAlign = "justify";
newCell.style.paddingTop = "5px";
newCell.style.paddingBottom = "5px";
row.onclick = function(){showOldMessage(this);};
var cell = row.cells[0];
cell.innerHTML = '<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="*" style="padding-left:5px;"><a href="'+res[1]+'" class="mailbox_read" style="text-decoration:none;">You</a>&nbsp;&nbsp;&nbsp;&nbsp;'+res[3]+'</td><td align="right" style="padding-right:5px;"><font color="#444444">'+res[1]+'</font></td></tr></table>';