Changing the first TR element to THEAD element

Printable View

03-23-2007, 04:37 AM
codeexploiter

Changing the first TR element to THEAD element

Hi all,

I have a sample table like the following

Code:

<table cellpadding="0" cellspacing="0" border="1" width="960"> <tr> <td width="100">Jons</td> <td>Web Developer</td> </tr> <tr> <td width="100">Thomas</td> <td>Web Developer</td> </tr> <tr> <td width="100">Dijomon</td> <td>Java Developer</td> </tr> </table>

I want to convert the first row of the above mentoned table into table header (thead elemnt) using JavaScript, how can I do something like this?

Any help would be appreciated.

Thanks in advance

regards
03-23-2007, 06:24 AM
jscheuer1

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <table id="mytable" cellpadding="0" cellspacing="0" border="1" width="960"> <tr> <td width="100">Jons</td> <td>Web Developer</td> </tr> <tr> <td width="100">Thomas</td> <td>Web Developer</td> </tr> <tr> <td width="100">Dijomon</td> <td>Java Developer</td> </tr> </table> <script type="text/javascript"> (function(){ var thc=document.getElementById('mytable').rows[0].cells; var newth; for (var i_tem = 0; i_tem < thc.length; i_tem++){ newth=document.createElement('th'); newth.innerHTML=thc[i_tem].innerHTML; thc[i_tem].parentNode.replaceChild(newth, thc[i_tem]); } })(); </script> </body> </html>
03-23-2007, 07:34 AM
jscheuer1

Ooops, I misunderstood the question but, I will leave my wrong answer in place as it may still be interesting. It changes the td's to th's. This code will transform the first row to a thead:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <table id="mytable" cellpadding="0" cellspacing="0" border="1" width="960"> <tr> <td width="100">Jons</td> <td>Web Developer</td> </tr> <tr> <td width="100">Thomas</td> <td>Web Developer</td> </tr> <tr> <td width="100">Dijomon</td> <td>Java Developer</td> </tr> </table> <script type="text/javascript"> (function(){ var tbl=document.getElementById('mytable'); var newth=document.createElement('thead'); newth.appendChild(tbl.rows[0].cloneNode(true)) tbl.rows[0].parentNode.removeChild(tbl.rows[0]); tbl.insertBefore(newth, tbl.getElementsByTagName('tbody')[0]); })(); </script> </body> </html>
03-23-2007, 10:02 AM
codeexploiter

Thanks John.

Actually i've developed some methods browser compatible method but your code gave me the correct direction and I've tweaked (used things from both the code you've furnished) your code a bit because it has one logical problem which I've colored in red (in your source code).

Code:

newth.appendChild(tbl.rows[0].cloneNode(true))

This line is the problem as tbl.rows[0] contains <td> elements have to convert that to th for me I've done that part.

I am extremely thankful for this help.

Regards