SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Apply Javascript to more than one table

    I am using a Javascript script to apply alternating colors to table rows on a web page. The script is called by this line in the HTML:

    <body onload="stripe('prices','#ebf1fa','#b4c7e6');">

    ('stripe' is the name of the JS function, and the parameters are the ID of the table I want the script to work on ('prices') and the colors that the alternating table rows are intended to be).

    This actually works fine as it is, but I would like the same effect to also apply to another table on the same web page which has an ID of 'technical.' Please can anyone advise me how to achieve this - I'm assuming I just need to rewrite the line above in some way to also apply the same effect to the 'technical' table. I have tried different ways of rewriting the line, but with no success so far. Any help would be much appreciated!

    If it's helpful, here is the actual script (separator_stripes.js):

    // Script by David Miller - www.fivevoltlogic.com
    // see www.alistapart.com/articles/zebratables


    // this function is need to work around
    // a bug in IE related to element attributes
    function hasClass(obj) {
    var result = false;
    if (obj.getAttributeNode("class") != null) {
    result = obj.getAttributeNode("class").value;
    }
    return result;
    }

    function stripe(id) {

    // the flag we'll use to keep track of
    // whether the current row is odd or even
    var even = false;

    // if arguments are provided to specify the colours
    // of the even & odd rows, then use the them;
    // otherwise use the following defaults:
    var evenColor = arguments[1] ? arguments[1] : "#fff";
    var oddColor = arguments[2] ? arguments[2] : "#eee";

    // obtain a reference to the desired table
    // if no such table exists, abort
    var table = document.getElementById(id);
    if (! table) { return; }

    // by definition, tables can have more than one tbody
    // element, so we'll have to get the list of child
    // &lt;tbody&gt;s
    var tbodies = table.getElementsByTagName("tbody");

    // and iterate through them...
    for (var h = 0; h < tbodies.length; h++) {

    // find all the &lt;tr&gt; elements...
    var trs = tbodies[h].getElementsByTagName("tr");

    // ... and iterate through them
    for (var i = 0; i < trs.length; i++) {

    // avoid rows that have a class attribute
    // or backgroundColor style
    if (!hasClass(trs[i]) && ! trs[i].style.backgroundColor) {

    // get all the cells in this row...
    var tds = trs[i].getElementsByTagName("td");

    // and iterate through them...
    for (var j = 0; j < tds.length; j++) {

    var mytd = tds[j];

    // avoid cells that have a class attribute
    // or backgroundColor style
    if (! hasClass(mytd) && ! mytd.style.backgroundColor) {

    mytd.style.backgroundColor = even ? evenColor :

    oddColor;

    }
    }
    }
    // flip from odd to even, or vice-versa
    even = ! even;
    }
    }
    }
    Last edited by shamwari; Jul 23, 2008 at 06:06. Reason: need to add info to query

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just use a class instead of an ID.
    http://www.frederikvig.com/temp/stripy_tables.html (taken from the book Simply Javascript)

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Currently you're loading the script from the onload event, so the easiest solution is to have the onload run a function that does the striping on both tables.

    Code html4strict:
    <body onload="initStripes();">

    Code javascript:
    function initStripes() {
        stripe('prices','#ebf1fa','#b4c7e6');
        stripe('technical','#ebf1fa','#b4c7e6');
    }

    There is a better way to do it though, which avoids the page loading delay that's inherent with the onload event. Don't use the onload event and run the script directly from the bottom of the body. This is one of the best practices for speeding up your web site.

    Code html4strict:
    <body>
    ...
    <script src="js/stripes.js"></script>
    </body>

    Code javascript:
    function initStripes() {
        stripe('prices','#ebf1fa','#b4c7e6');
        stripe('technical','#ebf1fa','#b4c7e6');
    }
    initStripes();

    It's useful to have the code in the function because the name of the function helps you to understand what's going on there, but it can be a nuisance to create a function that's used only once, and be called immediately after it's been defined.

    We can use a self-invoking function to help solve those issues. Normally they're anonymous, but they don't have to be. The name of the function is helpful when reading the code to let you know what's going on.

    Code javascript:
    (function initStripes() {
        stripe('prices','#ebf1fa','#b4c7e6');
        stripe('technical','#ebf1fa','#b4c7e6');
    })();

    While this has been a long post, it provides several solutions that can be used to solve the problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •