1
   

Alternating Table Row Styles Using the DOM!

 
 
Monger
 
Reply Sat 25 Mar, 2006 03:18 pm
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: 5,879 • Replies: 8
No top replies

 
dlowan
 
  1  
Reply Sat 25 Mar, 2006 04:34 pm
We love it when you talk dirty.
0 Replies
 
Monger
 
  1  
Reply Sat 25 Mar, 2006 05:08 pm
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
 
dlowan
 
  1  
Reply Sat 25 Mar, 2006 05:42 pm
What sort of ninja skills do you mean....(backing away cautiously, paw reaching for door....)
0 Replies
 
Craven de Kere
 
  1  
Reply Fri 28 Apr, 2006 09:21 pm
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
 
Joe Belmaati
 
  1  
Reply Mon 15 May, 2006 10:08 am
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
 
Monger
 
  1  
Reply Sun 21 May, 2006 10:34 am
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
 
Monger
 
  1  
Reply Fri 19 Jan, 2007 02:45 am
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
 
jespah
 
  1  
Reply Fri 19 Jan, 2007 05:30 am
It's a Monger sighting!!
0 Replies
 
 

Related Topics

In How much time a website can be developed? - Question by aussiejumpingcastle
Webdevelopment and hosting - Question by harisit2005
Showing an Ico File - Discussion by Brandon9000
how to earn money in internet - Discussion by rizwanaraj
The version 10 bug. Worse then Y2K! - Discussion by Nick Ashley
CSS Border style colors - Question by meesa
There is no Wisdom in Crowds - Discussion by ebrown p
THANK YOU CRAVEN AND NICK!!! - Discussion by dagmaraka
I'm the developer - Discussion by Nick Ashley
 
  1. Forums
  2. » Alternating Table Row Styles Using the DOM!
Copyright © 2019 MadLab, LLC :: Terms of Service :: Privacy Policy :: Page generated in 0.03 seconds on 04/25/2019 at 12:26:15