Results 1 to 4 of 4

Thread: Changing the first TR element to THEAD element

  1. #1
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default 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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •