[tdubyou]

Hi,

I can sort a table, and I can stripe a table (every other row a different color), but I can't figure out how to do both. When I sort a table by clicking on a column header, my striping gets thrown off.

Can someone look at my script and let me know if I can integrate striping into my sort table function?

Thanks, here's the sort table script:


function ts_resortTable(lnk) {
// get the span
var span;
for (var ci=0;ci<lnk.childNodes.length;ci++) {
if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];
}
var spantext = ts_getInnerText(span);
var td = lnk.parentNode;
var column = td.cellIndex;
var table = getParent(td,'TABLE');

// Work out a type for the column
if (table.rows.length <= 1) return;
var itm = ts_getInnerText(table.rows[1].cells[column]);
sortfn = ts_sort_caseinsensitive;
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = ts_sort_date;
if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date;
if (itm.match(/^[£$]/)) sortfn = ts_sort_currency;
if (itm.match(/^[\d\.]+$/)) sortfn = ts_sort_numeric;
SORT_COLUMN_INDEX = column;
var firstRow = new Array();
var newRows = new Array();
for (i=0;i<table.rows[0].length;i++) { firstRow[i] = table.rows[0][i]; }
for (j=1;j<table.rows.length;j++) { newRows[j-1] = table.rows[j]; }

newRows.sort(sortfn);

if (span.getAttribute("sortdir") == 'down') {
ARROW = '&nbsp;&nbsp;&uarr;';
newRows.reverse();
span.setAttribute('sortdir','up');
} else {
ARROW = '&nbsp;&nbsp;&darr;';
span.setAttribute('sortdir','down');
}


// We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
// don't do sortbottom rows
for (i=0;i<newRows.length;i++) {
if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1)))
table.tBodies[0].appendChild(newRows[i]);
}


// do sortbottom rows only
for (i=0;i<newRows.length;i++) {
if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1))
table.tBodies[0].appendChild(newRows[i]);
}


// Delete any other arrows there may be showing
var allspans = document.getElementsByTagName("span");
for (var ci=0;ci<allspans.length;ci++) {
if (allspans[ci].className == 'sortarrow') {
if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us?
allspans[ci].innerHTML = '&nbsp;&nbsp;&nbsp;';
}
}
}
span.innerHTML = ARROW;
}



Here's my striping script:

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 colors
// of the even &amp; odd rows, then use the them;
// otherwise use the following defaults:
var evenColor = arguments[1] ? arguments[1] : "#fff";
var oddColor = arguments[2] ? arguments[2] : "#DEE9FA";

// obtain a reference to the desired table
// if no such table exists, abort
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
// &amp;lt;tbody&amp;gt;s
var tbodies = table.getElementsByTagName("tbody");

// and iterate through them...
for (var h = 0; h < tbodies.length; h++) {

// find all the &amp;lt;tr&amp;gt; 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;
}
}
}