Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post

    Change styles of th and td elements in a table

    Hello,

    I have a table with id="testblock" like this:

    Code:
    <table id="testblock" cellspacing="0" cellpadding="0">
    <tr>
    <th>Block Title</th>
    </tr>
    <tr>
    <td>Any text here</td>
    </tr>
    </table>
    I am trying to change the styles with Javascript and have no problems with the table related styles. But I can't change the styles of th and td elements.


    Code:
    /* these do work */
    testblock.style.borderWidth = TableBorderWidth;
    testblock.style.borderSpacing = TableBorderSpacing;
    testblock.style.borderStyle = TableBorderStyle;
    testblock.style.borderColor = TableBorderColor;
    testblock.style.backgroundColor = TableBackgroundColor;
    
    /* these do not */
    testblock.th.style.padding = ThTdPadding;
    testblock.th.style.backgroundColor = ThBackgroundColor;
    testblock.th.style.color = ThColor;
    testblock.td.style.padding = ThTdPadding;
    How can I change the styles of th and td elements?

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Code:
    var tbl = document.getElementById("testblock");
    tbl.style.borderWidth = TableBorderWidth;
    tbl.style.borderSpacing = TableBorderSpacing;
    tbl.style.borderStyle = TableBorderStyle;
    tbl.style.borderColor = TableBorderColor;
    tbl.style.backgroundColor = TableBackgroundColor;
    
    //th
    var tHeaders = tbl.getElementsByTagName('th');
    for (var i=0; i<tHeaders.length; i++){
      tHeaders[i].style.padding = ThTdPadding;
      tHeaders[i].style.backgroundColor = ThBackgroundColor;
      tHeaders[i].style.color = ThColor;
    }
    
    //td
    var tData = tbl.getElementsByTagName('td');
    for (var i=0; i<tData.length; i++){
      tData[i].style.padding = ThTdPadding;
    }

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post
    Hi Glenn,

    thanks for your help. You suggested a nice solution by using getElementsByTagName. I managed to overcome the problem by assigning seperate id's to th and td within the same table:

    Code:
    <table id="testblock" cellspacing="0" cellpadding="0">
    <tr>
    <th id="testblock_th">Block Title</th>
    </tr>
    <tr>
    <td id="testblock_td">Any text here</td>
    </tr>
    </table>
    and

    Code:
    var testblock = document.getElementById("testblock");
    testblock.style.borderWidth = TableBorderWidth;
    testblock.style.borderSpacing = TableBorderSpacing;
    testblock.style.borderStyle = TableBorderStyle;
    testblock.style.borderColor = TableBorderColor;
    testblock.style.backgroundColor = TableBackgroundColor;
    
    var testblock_th = document.getElementById("testblock_th");
    testblock_th.style.padding = ThTdPadding;
    testblock_th.style.backgroundColor = ThBackgroundColor;
    testblock_th.style.color = ThColor;
    
    var testblock_td = document.getElementById("testblock_td");
    testblock_td.style.padding = ThTdPadding;


  •  

    Posting Permissions

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