SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  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 05:06. Reason: need to add info to query


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
  •