SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Js/dhtml

  1. #1
    SitePoint Enthusiast rash's Avatar
    Join Date
    Dec 2004
    Location
    Earth
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Js/dhtml

    I drawing a table with javascript and fills the table with some text. After the table is completed I would like to add backgroundcolor for every row. Odd row should be black and even white. Like numberofrows %2=0 -thing. My problem is to make a selection to get the row/cell i want to repaint the bg on. I may not paint it the at the same time I create it. Only when the tablestructure is done. Any ideas someone?
    RASH.

  2. #2
    SitePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can get the cells with document.getElementsByTagName('td'). What will be returned is an array with the td's appearing in the order they are in the markup. (Remember, if you are using th's, you'll need to address them separately.) So, for instance, if you did this:

    var cells=document.getElementsByTagName('td');

    You could then apply styles like:

    cells[0].style.border = "2px solid blue";
    cells[1].style.border = "4px groove green";

    Naturally, a for loop would the way to go to do the actual application of styles.

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The <table> element has a rows() collection and a cells() collection for each row. You have to make sure your table is properly structured with a <tbody>, <thead>, etc.

  4. #4
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a quick script demonstrating both approaches. Technically, tbody and thead are more convenience than necessity; newer browsers automatically create a tbody reference if there is none in your markup and thead or tfoot are optional. The rows/cells approach may be more convenient if you have both th and td elements as either is treated as part of a row's cell collection. Except in IE, however, you must address the cells row by row, whereas the creation of a td array with getElementsByTagName() allows easy sequential access to the elements for looping through.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     <html>
     <head>
     <title>Untitled</title>
     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
     <style type="text/css">
     td{border:4px groove;}
     </style>
     <script type="text/javascript">
     function cellCollChg(){
       document.getElementById('tableOne').rows[0].cells[1].style.border="4px solid red";
     }
     function cellTagChg(){
       var cells=document.getElementsByTagName('td');
       cells[4].style.border="4px dotted blue";
     }
     function setTbTwo(bod_id){
       var cells=document.getElementById(bod_id).getElementsByTagName('td')
       for(var i=0;i<cells.length;i++){
     	cells[i].style.border="4px dashed #9e9";
     	++i;
     	if(i<cells.length) cells[i].style.border="4px solid #edd";
       }
     }
     </script>
     </head>
     <body>
     <table id="tableOne">
     <tbody id="tb1">
     <tr>
     <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
     </tr>
     <tr>
     <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
     </tr>
     </tbody>
     <tbody id="tb2">
     <tr>
     <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
     </tr>
     <tr>
     <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
     </tr>
     <tr>
     <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
     </tr>
     </tbody>
     </table>
     <p>
     <a href="#" onclick="cellCollChg();">change row 1 cell 2</a>
     <br /><br />
     <a href="#" onclick="cellTagChg();">change cell 5</a>
     <br /><br />
     <a href="#" onclick="setTbTwo('tb2');">change cells in second tbody</a>
     </p>
     </body>
     </html>
    It occurred to me that you might benefit from knowing that while a table can only have one thead and/or tfoot, it can have multiple tbodys. I have modified the above page to demonstrate that technique, as well as parameter passing to establish the function's target. Again, given what you describe, I imagine your actual application would be best served by a for loop, which is also demonstrated.
    Last edited by JVLB; Feb 6, 2005 at 09:09.

  5. #5
    SitePoint Enthusiast rash's Avatar
    Join Date
    Dec 2004
    Location
    Earth
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your effort in my question, I will try out every sugestion and get back to you all. Thanks!
    RASH.

  6. #6
    SitePoint Enthusiast rash's Avatar
    Join Date
    Dec 2004
    Location
    Earth
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This line solved everything.
    HTML Code:
     document.getElementById('tableOne').rows[0].cells[1]
    .
    I didnt know how to get rows and cells to arrays.
    Two loops, one for each row and one for the cels on that row.

    Thx Guys!
    RASH.


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
  •