...

View Full Version : change color of every other row



esthera
02-02-2007, 07:49 AM
I am using a great script i downloaded at http://kryogenix.org/code/browser/sorttable/
to sort tables by the header.
my problem is I want to add to this that everyother row should have a gray background.

I now do it by assigning a different class to every other row but when you sort it keeps the class. -- is there a way to change the background color of every other row in javascript that I can use with the above script?

_Aerospace_Eng_
02-02-2007, 08:05 AM
Add this to your javascript file.

function setBg()
{
var trs = thisTbl.getElementsByTagName('tr');
for(var i = 0; i < trs.length; i++)
{
trs[i].style.background = ((i % 2) == 0) ? '#EEE' : '#FFF';
}
}
Then change this

function sortables_init() {
// Find all tables with class sortable and make them sortable
if (!document.getElementsByTagName) return;
tbls = document.getElementsByTagName("table");
for (ti=0;ti<tbls.length;ti++) {
thisTbl = tbls[ti];
if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
//initTable(thisTbl.id);
ts_makeSortable(thisTbl);
}
}
}
to this

function sortables_init() {
// Find all tables with class sortable and make them sortable
if (!document.getElementsByTagName) return;
tbls = document.getElementsByTagName("table");
for (ti=0;ti<tbls.length;ti++) {
thisTbl = tbls[ti];
if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
//initTable(thisTbl.id);
ts_makeSortable(thisTbl);
setBg();
}
}
}
and change this

function ts_resortTable(lnk,clid) {
// 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 = clid || 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;
}
to this

function ts_resortTable(lnk,clid) {
// 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 = clid || 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;';
}
}
}
setBg();
span.innerHTML = ARROW;
}

Bill Posters
02-02-2007, 08:06 AM
Automatic coloured rows demo (http://test.newplasticarts.co.uk/_tests/javascript%2Bdom/table_stripe_complete_flexible/)

esthera
02-02-2007, 08:58 AM
thanks Aerospace_Eng_

works perfect!!

djsting
06-05-2009, 10:39 PM
The new sorttable.js file has changed in the last 2 years... are you able to repost which areas of the .js file to change in order to get this desired effect???

Please and thanks!!

esthera
01-17-2010, 09:12 AM
does anyone know what updates need to be done to the newest version for this?

Philip M
01-17-2010, 10:16 AM
Automatic coloured rows demo (http://test.newplasticarts.co.uk/_tests/javascript%2Bdom/table_stripe_complete_flexible/)

Page cannot be found.

rnd me
01-17-2010, 01:07 PM
does anyone know what updates need to be done to the newest version for this?

you can use CSS for this.
it wouldn't need any javascript, so you could use whatever sorter you want.
google "zebra stripe css" for info.

if you care about ie6+7, then you'll have to use javascript.
you can still use mostly CSS, and javascript for ie only.

just add the javascript version's selector (class) to the css:

#mytable tr:nth-child(even), #mytable tr.even { background:#fff;}
#mytable tr:nth-child(odd), #mytable tr.odd { background:#ddd;}

and everytime you sort the table, and you are in IE, loop through the rows and apply "even" or "odd" class to the table rows.

if you post the code you are using, i'm sure i can help you integrate the above's fallback IE javascript into your table sorter.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum