Sortable Table with Alternating Row Colors

Joost Valk May 17, 2006

This script will sort tables with ease, creating alternating row colors, as well. Easy to implement.

Numbers	Alphabet	Dates	Currency	Unsortable
1	Z	01-01-2006	$ 5.00	Unsortable
2	y	04-13-2005	$ 6.70	Unsortable
3	X	08-17-2006	$ 6.50	Unsortable
4	w	01-01-2005	$ 4.20	Unsortable
5	V	05-12-2006	$ 7.15	Unsortable
15			$ 29.55

The JavaScript Source: Miscellaneous : Sortable Table with Alternating Row Colors

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

a img {
  border: 0;
}

table.sortable {
  border-spacing: 0;
  border: 1px solid #000;
  border-collapse: collapse;
  test-align: center;
}

table.sortable th, table.sortable td {
  text-align: right;
  padding: 2px 4px 2px 4px;
  width: 100px;
  border-style: solid;
  border-color: #444;
}

table.sortable th {
  border-width: 0px 1px 1px 1px;
  background-color: #ccc;
}

table.sortable td {
  border-width: 0px 1px 0px 1px;
}

table.sortable tr.odd td {
  background-color: #ddd;
}

table.sortable tr.even td {
  background-color: #fff;
}

table.sortable tr.sortbottom td {
  border-top: 1px solid #444;
  background-color: #ccc;
  font-weight: bold;
}

/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: Joost de Valk :: http://www.joostdevalk.nl/ */

/*
Table sorting script, taken from http://www.kryogenix.org/code/browser/sorttable/ .
Distributed under the MIT license: http://www.kryogenix.org/code/browser/licence.html .

Adaptation by Joost de Valk (http://www.joostdevalk.nl/) to add alternating row classes as well.

/* Change these values */
var image_path = "";
// var image_path = "/code/sortable_table/";
var image_up = "arrow-up.gif";
var image_down = "arrow-down.gif";
var image_none = "arrow-none.gif";

/* Don't change anything below this unless you know what you're doing */
addEvent(window, "load", sortables_init);

var SORT_COLUMN_INDEX;

function ts_makeSortable(table) {
  if (table.rows && table.rows.length > 0) {
    var firstRow = table.rows[0];
  }
  if (!firstRow) return;

// We have a first row: assume it's the header, and make its contents clickable links
  for (var i=0;i<firstRow.cells.length;i++) {
    var cell = firstRow.cells[i];
    var txt = ts_getInnerText(cell);
    if (cell.className != "unsortable" && cell.className.indexOf("unsortable") == -1) {
      cell.innerHTML = '<a href="#" class="sortheader" onclick="ts_resortTable(this);return false;">'+txt+'<span class="sortarrow">  <img src="'+ image_path + image_none + '" alt="↓"/></span></a>';
    }
  }
  alternate(table);
}

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 = '  <img src="'+ image_path + image_up + '" alt="↑"/>';
    newRows.reverse();
    span.setAttribute('sortdir','up');
  } else {
    ARROW = '  <img src="'+ image_path + image_down + '" alt="↓"/>';
    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 = '  <img src="'+ image_path + image_none + '" alt="↓"/>';
      }
    }
  }

span.innerHTML = ARROW;
  alternate(table);
}

function ts_sort_currency(a,b) {
  aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
  bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
  return parseFloat(aa) - parseFloat(bb);
}

function addEvent(elm, evType, fn, useCapture) {
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew

if (elm.addEventListener){
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent){
    var r = elm.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Handler could not be removed");
  }
}

function replace(s, t, u) {
  /*
  **  Replace a token in a string
  **    s  string to be processed
  **    t  token to be found and removed
  **    u  token to be inserted
  **  returns new String
  */
  i = s.indexOf(t);
  r = "";
  if (i == -1) return s;
  r += s.substring(0,i) + u;
  if ( i + t.length < s.length)
    r += replace(s.substring(i + t.length, s.length), t, u);
  return r;
}

<table class="sortable" id="anyid" cellpadding="0" cellspacing="0">
  <tr>
    <th>Numbers</th>
    <th>Alphabet</th>
    <th>Dates</th>
    <th>Currency</th>
    <th class="unsortable">Unsortable</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Z</td>
    <td>01-01-2006</td>
    <td>$ 5.00</td>
    <td>Unsortable</td>
  </tr>
  <tr>
    <td>2</td>
    <td>y</td>
    <td>04-13-2005</td>
    <td>$ 6.70</td>
    <td>Unsortable</td>
  </tr>
  <tr>
    <td>3</td>
    <td>X</td>
    <td>08-17-2006</td>
    <td>$ 6.50</td>
    <td>Unsortable</td>
  </tr>
  <tr>
    <td>4</td>
    <td>w</td>
    <td>01-01-2005</td>
    <td>$ 4.20</td>
    <td>Unsortable</td>
  </tr>
  <tr>
    <td>5</td>
    <td>V</td>
    <td>05-12-2006</td>
    <td>$ 7.15</td>
    <td>Unsortable</td>
  </tr>
  <tr class="sortbottom">
    <td>15</td>
    <td></td>
    <td></td>
    <td>$ 29.55</td>
    <td></td>
  </tr>
</table>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Sortable Table with Alternating Row Colors

Leave a Response

Attention JavaScript Coders

Whitepapers and More