PDA

View Full Version : 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



<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
<!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:


<!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).


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