// ======================================================================= // University of Minnesota Nanotechnology Coordinating Office // http://www.nano.umn.edu // University of Minnesota Institute of Technology // http://www.itdean.umn.edu // // /scripts/umn_nano_zebra_tables.js // // // Javascript functions to stripe alternating lines in a table with color. // Striping can be initiated by an attribute to the tag // (e.g. onload="stripe('stafflist');" ). By default the table will be // white on the odd numbered lines and gray on the even lines. This can // be overridden in the function call // (e.g. onload="stripe('stafflist', 'even_color', 'odd_color');" ). // // // Programmer: John Schafer jschafer :at: umn :dot: edu // // ======================================================================= // Copyright (C) 2006, 2007 University of Minnesota // All rights reserved. // THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY // KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE // IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A PARTICULAR // PURPOSE. // ======================================================================= /* Zebra Tables These functions were taken from an article by David F. Millar on Zebra Tables at A List Apart. http://www.alistapart.com/articles/zebratables */ // This function is needed 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] : "#dfdfdf"; var oddColor = arguments[2] ? arguments[2] : "#fff"; // Obtain a reference to the desired table, if no such table exists, // abort the process. 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 s var tbodies = table.getElementsByTagName("tbody"); // and iterate through them... for (var h = 0; h < tbodies.length; h++) { // find all the 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; } } // end for (var h = 0; ... } // end function() function stripeTables() { // 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] : "#dfdfdf"; var oddColor = arguments[2] ? arguments[2] : "#fff"; // Get all the table in this document... var tables = document.getElementsByTagName("table"); // and iterate through them... for (var h = 0; h < tables.length; h++) { var mytable = tables[h]; // avoid cells that have a class attribute or // backgroundColor style if (! hasClass(mytable) && ! mytable.style.backgroundColor) { mytable.style.backgroundColor = even ? evenColor : oddColor; } // flip from odd to even, or vice-versa even = ! even; } // end for (var h = 0; ... } // end function()