Alternating Table Row Styles Using the DOM!

Forums: Web Development, Html, Css, Javascript
Email this Topic • Print this Page

I found some sample code on Jay Skript And The Domsters

Code:

<style>

    tr.alt-bg {background-color:#b1c2de;}

</style>





<script>



    // Add style to every other row in tables with class="striped" within parent id

    function stripeTables() {

        var parentObject = document.getElementById("content"); // Parent ID

        var tables = getElementsByClassName(parentObject, "table", "striped");

        for (var i = 0; i < tables.length; i++) {

            var oddRow = false;

            var rows = tables[i].getElementsByTagName("tr");

            for (var j = 0; j < rows.length; j++) {

                if (oddRow == true) {

                    oddRow = false;

                } else {

                    addClass(rows[j], "alt-bg");

                    oddRow = true;

                }

            }

        }

    }

   

    /* Return array of all elements with specified class name, limited by parent object

    (use "document" for full page) and html tag (use "*" for all) */

    function getElementsByClassName(parentObject, tagName, className) {

        var elements = parentObject.getElementsByTagName(tagName);

        var returnElements = new Array();

        for (var i = 0; i < elements.length; i++) {

            if (hasClass(elements[i], className)) {

                returnElements.push(elements[i]);

            }

        }

        return returnElements;

    }

   

    // Check if a class is among the classes used by an element

    function hasClass(element, className) {

        var regEx = new RegExp('\\b' + className + '\\b', "i")

        return element.className.match(regEx);

    }

   

    // Add class to element (preserves any existing classes)

    function addClass(element, value) {

        element.className += (element.className) ? (' ' + value) : value;

    }

   

    // Add function to page onLoad event (preserves any existing function calls in body onLoad, etc)

    function addLoadEvent(func) {

        var oldOnload = window.onload;

        if (typeof window.onload != 'function') {

            window.onload = func;

        } else {

            window.onload = function() {

                oldOnload();

                func();

            }

        }

    }

   

    addLoadEvent(stripeTables);



</script>

For help with manually setting alternating table row styles with the help of a regular expression, see: Regex search & replace to apply style to alternating TR rows.

Also note that I would not recommend using the above JavaScript with dynamically created tables, due to the ease of setting alternating styles in such cases.

Topic Stats
Top Replies
Link to this Topic

Type: Discussion • Score: 1 • Views: 6,471 • Replies: 8

No top replies

We love it when you talk dirty.

0 Replies

Mad web skills does work wonders with the ladies. Not as much as ninja skills (which I also have in bountiful measure), but very close.

0 Replies

What sort of ninja skills do you mean....(backing away cautiously, paw reaching for door....)

0 Replies

Nice. I've been moving all my projects toward DOM-oriented js as well. I don't like inline js a lot so I'm abstracting it completely by having the js parse the DOM to find what to do instead of direcly invoking it all the time from the object.

It's been dramatically changing the responsiveness and markup cleanliness of my web development.

0 Replies

I was just about to fire off a response along the lines of "that is an awful lot of code for what you can do with three lines of PHP" - then I read your final line.

Still, with just a few lines of PHP you can do alternating row colors, so why rely on js?

0 Replies

This is for non-dynamic tables.

I'm well aware that it's very easy to stripe tables generated from a database on the backend....it only takes one line of code, actually. I don't use PHP, but I'm sure you can pull off something like the following (which is written in ColdFusion):

Code:{tr {cfif NOT query.currentRow MOD 2}class="alt-bg"{/cfif}}

Replace the swirly brackets, or whatever they're called, with angled brackets...A2K is stripping out tag attributes if I use angled brackets.

Also note that I've improved the hassClass() and addClass() functions above, but in the process A2K stripped out the attributes for my <style> and <script> tags (this feature has obviously been implemented since I originally posted this). I also had to remove the HTML comments within my style and script tags, because they were causing big blocks of (but not all) the code inside to be removed, for whatever reason.

If you wanted to, you could write a back-end parser that would accomplish the same thing as the JavaScript above for static tables. With .NET's support of regex balancing groups (a solution for handling recursion) you could probably process the entire page with one line of code, but no regex engine aside from .NET's (certainly not PHP's) supports balancing groups.

And as a footnote, you could remove the addLoadEvent() function fom the above code if you want to just run stripeTables() from body onload.

0 Replies

The code above is rather mediocre and certainly bulkier than necessary (I've learned quite a bit about JavaScript since I posted this). Currently, I use Mootools to pull off simple DOM tasks like this.

0 Replies

It's a Monger sighting!!

0 Replies

Alternating Table Row Styles Using the DOM!

Related Topics

Quick Links

My Account

able2know