Changing the first TR element to THEAD element

**codeexploiter** · 03-23-2007, 04:37 AM

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

**jscheuer1** · 03-23-2007, 06:24 AM

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>

**jscheuer1** · 03-23-2007, 07:34 AM

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>

**codeexploiter** · 03-23-2007, 10:02 AM

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

Thread: Changing the first TR element to THEAD element

Thread Tools

Search Thread

Changing the first TR element to THEAD element

Bookmarks

Bookmarks

Posting Permissions