Full version: jsB@nk » Form » Table » Alternating Rows for Static Spreadsheet
URL: https://www.javascriptbank.com/alternating-rows-for-static-spreadsheet.html
This JavaScript code uses both CSS and JavaScript to design your tabular data stream which based Web.It make your text data nice and easy to read, you just customize and use, because the JavaScript code is published as the open source code with Commons Creative Commons License.
Full version: jsB@nk » Form » Table » Alternating Rows for Static Spreadsheet
URL: https://www.javascriptbank.com/alternating-rows-for-static-spreadsheet.html
<style type="text/css"><!--.arc90_altrows-Brown { font-family: Georgia, serif;}.arc90_altrowsBrown0 { background-color: #D0997E;}.arc90_altrowsBrown1 { background-color: #E5C6B7;}.arc90_altrowsBrown2 { background-color: #F3E4DD;}.arc90_altrows-Brown td { font-size: .85em;padding: .5em;}.arc90_altrows-Brown th {border: 1px solid #BF5623;padding: .5em;color: #FFF;}--></style><script language="javascript"><!--// Created by: Arc90, Inc. :: http://arc90.com/// Licensed under: Creative Commons License/* Globals */var arc90_isIE = document.all? true: false;function arc90_altrows() {var parts = ['TABLE', 'THEAD', 'TFOOT', 'TBODY'];for (var t = 0, r = parts.length; t < r; t++) {var T = document.getElementsByTagName(parts[t]);// create the alterNationfor (var i = 0, l = T.length, c = 0; i < l; i++) {var tc = T[i].className;var a = tc.indexOf('altrows');var n = tc.indexOf('norows');if (n >= 0) {T[i].className = 'arc90_norows';var R = T[i].getElementsByTagName('TR');for (var j = 0, m = R.length; j < m; j++) {R[j].style.background = '';R[j].className = 'arc90_norows';}} else if (a >= 0 ) {var c = T[i].className.slice(a), s = c.indexOf(' '), x = null, z = '', cn = '';c = T[i].className.slice(a, s > 0? s: T[i].className.length).split('-');if (c.length == 2) { // themecn = c[1];} else if (c.length > 2) { // rotating colourscn = c.slice(1);x = c.length - 1;z = -1;}// now go through every sub row and assign alternating row coloursR = T[i].getElementsByTagName('TR');for (var j = 0, m = R.length; j < m; j++) {n = R[j].className.indexOf('norows');if (n >= 0)continue;z = (x != null && z+1 < x? z+1: x != null? 0: j % 2); // either the rotating row number or theme alternationif (x == null) R[j].className = 'arc90_altrows'+cn+''+z;else R[j].style.backgroundColor = '#'+ cn[z];}}}}}/* Events */function arc90_isString(o) { return (typeof(o) == "string"); }function arc90_isNumeric(o) { return (typeof(parseFloat(o).toString() == 'NaN'? 'xxx': parseFloat(o)) == "number" && parseFloat(o) != ''); }function arc90_addEvent(e, meth, func, cap) {if (arc90_isString(e))e = document.getElementById(e);if (e.addEventListener){e.addEventListener(meth, func, cap); return true;}else if (e.attachEvent)return e.attachEvent("on"+ meth, func);return false;}/* Nodes */function arc90_newNode(t, i, s, x, c) {var node = document.createElement(t);if (x != null && x != '') {var n = document.createTextNode(x);node.appendChild(n);}if (i != null && i != '')node.id = i;if (s != null && s != '')node.className = s;if (c != null && c != '')node.appendChild(c);return node;}/* Onload */arc90_addEvent(window, 'load', arc90_altrows);//--></script><table class="arc90_altrows-Brown" summary="Acme Employee List"><tbody><tr class="arc90_altrowsBrown0"><th>Name</th><th>Extension</th><th>Start date</th></tr><tr class="arc90_altrowsBrown1"><td>Bloggs, Fred</td><td>1353</td><td>08/18/2003</td></tr><tr class="arc90_altrowsBrown0"><td>Turvey, Kevin</td><td>2342</td><td>02/05/1979</td></tr><tr class="arc90_altrowsBrown1"><td>Mbogo, Arnold</td><td>2755</td><td>09/08/1998</td></tr><tr class="arc90_altrowsBrown0"><td>Shakespeare, Bill</td><td>3211</td><td>12/11/1961</td></tr><tr class="arc90_altrowsBrown1"><td>Fitz, Marvin</td><td>5554</td><td>05/22/1995</td></tr></tbody></table>