Webmaster Forum / Browsers / Internet Explorer / July 2004

I want to be able to dynamically turn my first row TD cells into TH
cells. I know that I can't change the outerHTML property, so I simply
create a new table row and use appendChild to insert TH cells, and
then remove the existing row. However, I want to make sure that the TH
cells retain any/all attributes of the original TD cell. This is where
I'm stumped. I thought the following would work:

// BEGIN CODE
//---------------

var oldRow = myTable.rows[0];
var newRow = myTable.insertRow[0];
var newCell;

// LOOP THE ORIG. ROW AND RECREATE ANOTHER USING TH CELLS
for (i=0; i < oldRow.cells.length; i++) {

 // CREATE THE TH ELEMENT USING AN HTML STRING MODELED FROM ORIG.
CELL
 var s = oldRow.cells[i].outerHTML;    // s = "<TD colspan=2></TD>"
 s = s.replace(/<TD/gi, "<TH");        // s = "<TH colspan=2></TD>"
 s = s.replace(/<\/TD>/gi, "<\/TH>");  // s = "<TH colspan=2></TH>"

 newCell = document.createElement(s);

 // DEBUG: newCell.outerHTML
 // SHOWS -- "<<TH colspan=2>asdf</TH>><<TH colspan=2>asdf</TH>>" --
WHY??????
 alert(newCell.outerHTML);

 // INSERT THE TH CELL
 newRow.appendChild(newCell);

}

// REMOVE THE OLD ROW
myTable.deleteRow[1];

//---------------
// END CODE

This code sort of works, HOWEVER, the HTML that is appended to newRow
is ALL MESSED UP! In debugging, I check the outerHTML of newCell after
it is created and it looks like "<<TH colspan=2>asdf</TH>><<TH
colspan=2>asdf</TH>>" when it should look like "<TH
colspan=2>asdf</TH>". What is going on here? Any ideas?

Jason