Version complète: jsB@nk » Form » Table » Trier le tableau avec une alternance de couleurs Row
URL: https://www.javascriptbank.com/sortable-table-with-alternating-row-colors-index.html
Cet JavaScript va à la facilité de tri des tableaux, la création de la ligne alternant les couleurs, aussi. Facile à mettre en oeuvre.
Version complète: jsB@nk » Form » Table » Trier le tableau avec une alternance de couleurs Row
URL: https://www.javascriptbank.com/sortable-table-with-alternating-row-colors-index.html
<style type="text/css">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;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript">// 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.Copyright (c) 1997-2006 Stuart Langridge, Joost de Valk.*//* 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 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)) { ts_makeSortable(thisTbl); } }}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_getInnerText(el) { if (typeof el == "string") return el; if (typeof el == "undefined") { return el }; if (el.innerText) return el.innerText; //Not needed but it is faster var str = ""; var cs = el.childNodes; var l = cs.length; for (var i = 0; i < l; i++) { switch (cs[i].nodeType) { case 1: // element_node str += ts_getInnerText(cs[i]); break; case 3: // text_node str += cs[i].nodeValue; break; } } return str;}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 getParent(el, pTagName) { if (el == null) { return null; } else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) { // Gecko bug, supposed to be uppercase return el; } else { return getParent(el.parentNode, pTagName); }}function ts_sort_date(a,b) { aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]); bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]); if (aa.length == 10) { dt1 = aa.substr(6,4)+aa.substr(3,2)+aa.substr(0,2); } else { yr = aa.substr(6,2); if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; } dt1 = yr+aa.substr(3,2)+aa.substr(0,2); } if (bb.length == 10) { dt2 = bb.substr(6,4)+bb.substr(3,2)+bb.substr(0,2); } else { yr = bb.substr(6,2); if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; } dt2 = yr+bb.substr(3,2)+bb.substr(0,2); } if (dt1==dt2) { return 0; } if (dt1<dt2) { return -1; } return 1;}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 ts_sort_numeric(a,b) { aa = parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX])); if (isNaN(aa)) { aa = 0; } bb = parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX])); if (isNaN(bb)) { bb = 0; } return aa-bb;}function ts_sort_caseinsensitive(a,b) { aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase(); bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase(); if (aa==bb) { return 0; } if (aa<bb) { return -1; } return 1;}function ts_sort_default(a,b) { aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]); bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]); if (aa==bb) { return 0; } if (aa<bb) { return -1; } return 1;}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;}function alternate(table) { // Take object table and get all it's tbodies. var tableBodies = table.getElementsByTagName("tbody"); // Loop through these tbodies for (var i = 0; i < tableBodies.length; i++) { // Take the tbody, and get all it's rows var tableRows = tableBodies[i].getElementsByTagName("tr"); // Loop through these rows // Start at 1 because we want to leave the heading row untouched for (var j = 1; j < tableRows.length; j++) { // Check if j is even, and apply classes for both possible results if ( (j % 2) == 0 ) { if (tableRows[j].className == 'odd' || !(tableRows[j].className.indexOf('odd') == -1) ) { tableRows[j].className = replace(tableRows[j].className, 'odd', 'even'); } else { tableRows[j].className += " even"; } } else { if (tableRows[j].className == 'even' || !(tableRows[j].className.indexOf('even') == -1) ) { tableRows[j].className = replace(tableRows[j].className, 'even', 'odd'); } tableRows[j].className += " odd"; } } }}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/form/Sortable_Table_with_Alternating_Row_Colors/arrow-down.gifhttp://javascriptbank.com/javascript/form/Sortable_Table_with_Alternating_Row_Colors/arrow-none.gifhttp://javascriptbank.com/javascript/form/Sortable_Table_with_Alternating_Row_Colors/arrow-up.gif