SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: stripy_tables

  1. #1
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    stripy_tables

    Not getting css to work in every other row.
    here's code:
    // JavaScript Document

    var StripyTables =
    {
    init: function()
    {

    var tables = Core.getElementsByClass("dataTable");

    for (var i = 0; i < tables.length; i++)
    {
    var tbodys = tables[i].getElementsByTagName("tbody");

    for (var j = 0; j < tbodys.length; j++)
    {
    var rows = tbodys[j].getElementsByTagName("tr");

    for (var k = 1; k < rows.length; k += 2)
    {
    Core.addClass(rows[k], "alt");
    }
    }
    }
    }
    };

    Core.start(StripyTable);

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    There is a StripyTables/StripyTable spelling mistake that's causing the problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, i missed that but it still is not working.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I tested it locally with some sample code and it worked fine.

    Does your table have a "dataTable" class name? If so then we'll need to look at the html and css code that you're using in order to help you much further.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the html obviously, I'm also going to post the core.js for the class code
    I figure the img source is not a big factor but the alt is set to yes (not sure about that)
    Thanks

    <table class="dataTable">
    <thead>
    <tr>
    <th scope="col">
    Web Luminary
    </th>
    <th scope="col">
    Height
    </th>
    <th scope="col">
    Hobbies
    </th>
    <th scope="col">
    Digs microformats?
    </th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>
    John Allsopp
    </td>
    <td class="number">
    6'1"
    </td>
    <td>
    Surf lifesaving, skateboarding, b-boying
    </td>

    <td class="yesno">
    <img src="" align="Yes" />
    </td>
    </tr>
    </tbody>
    <tbody>
    <tr>
    <td>
    Steve Torbes
    </td>
    <td class="number">
    6'1"
    </td>
    <td>
    Surf lifesaving, skateboarding, b-boying
    </td>

    <td class="yesno">
    <img src="" align="Yes" />
    </td>
    </tr>
    </tbody>
    <tbody>
    <tr>
    <td>
    Jack Mcfarlene
    </td>
    <td class="number">
    6'1"
    </td>
    <td>
    Surf lifesaving, skateboarding, b-boying
    </td>

    <td class="yesno">
    <img src="" align="Yes" />

    </td>
    </tr>
    <tr>
    <td>
    Jack Mcfarlene
    </td>
    <td class="number">
    6'1"
    </td>
    <td>
    Surf lifesaving, skateboarding, b-boying
    </td>

    <td class="yesno">

    </td>
    </tr>
    </tbody>
    </table>

    core.js

    Core.getElementsByClass = function(theClass)
    {
    var elementArray = [];

    if (typeof document.all != "undefined")
    {
    elementArray = document.all;
    }
    else
    {
    elementArray = document.getElementsByTagName("*");
    }

    var matchedArray = [];
    var pattern = new RegExp("(^| )" + theClass = "( |$)");

    for (var i = 0; i < elementArray.length; i++)
    {
    if (pattern.test(elementArray.[i].className))
    {
    matchedArray[matchedArray.length] = elementArray[i];
    }
    }

    return matcheArray;
    };

    Core.hasClass = function(target, theClass)
    {
    var pattern = new RegExp("(^| )" + theClass + "( |$)");

    if (pattern.test(target.className))
    {
    return true;
    }

    return false;
    };

    Core.addClass = function(target, theClass)
    {
    if (!Core.hasClass(target, theClass))
    {
    if (target.className == "")
    {
    target.className = theClass;
    }
    else
    {
    target.className += " " + theClass;
    }
    }
    };

    Core.removeClass = function(target, theClass)
    {
    var pattern = new RegExp("(^| )" + theClass + "( |$)");

    target.className = target.ClassName.replace(pattern, "$1");
    target.className = target.ClassName.replace(/ $/, "");
    };

  6. #6
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You seem to have multiple tbody elements with only one row in each so it will never find a second row within any tbody to add the class to. Unless you have some kind of specific need for multiple tbody elements (grouping for example) then just put your rows in one tbody.

  7. #7
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I took out the xtra tbody tags (not good with tables) still does not work.
    I might have to start from scratch.
    by the way, thanks for the help!
    Last edited by caustics; Oct 23, 2008 at 16:10.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The problem is with your core.js file.
    Download a fresh one from http://www.sitepoint.com/blogs/2007/...-core-library/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the core I had for this project looked the same. I'm using the download for later use thanks.
    still does not work.
    I Only need the tr.alt in the css?
    thanks

    my god it works!
    threw out old core.
    thank you very very much!
    great help!

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Yes, the alt class is all you need. You don't even need to specify that it's for the tr element.

    Code css:
    .alt {
        background-color: gray;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You may be best to use the error console in the Firefox browser to work out what the problem is then. Firefox is very good at providing useful error messages.
    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
  •