»

AnglaisFran�aisVietnamien

Imprimer - SmartTables - triables Sheet - JavaScriptBank.com

Version compl�te: jsB@nk » Form » Table » SmartTables - triables Sheet
URL: https://www.javascriptbank.com/smarttables-sortable-sheet.html

Couleur une ligne sur deux, de trier des lignes et des colonnes en ordre croissant ou décroissant, tout en ajoutant un peu className. Facile à utiliser!

Version compl�te: jsB@nk » Form » Table » SmartTables - triables Sheet
URL: https://www.javascriptbank.com/smarttables-sortable-sheet.html

<style type="text/css"><!--.smartTable{border-collapse:collapse; margin:20px auto;}.smartTable th, .smartTable td{border:1px solid #000000; padding:5px;}.smartTable th{background-color:#666666; color:#FFFFFF;}.smartTable .r0 td{}.smartTable .r1 td{background-color:#F6F6F6;}.smartTable .over td{background-color:#FF8800;}.smartTable .sortedAsc{background-color:#66CC66 !important;}.smartTable .sortedDesc{background-color:#CC6666 !important;}--></style>

<script type="text/javascript"><!--// Created by RoBorg - http://javascript.geniusbug.com | http://www.roborg.co.ukfunction smartTableInit() { var tables = document.getElementsByTagName('table'); var len = tables.length; for(var i=0; i<len; i++) {  if(tables[i].className.indexOf('smartTable') != -1) smartTable(tables[i]); }}function smartTable(t) { var trs = t.getElementsByTagName('tbody').item(0).getElementsByTagName('tr'); var len = trs.length; for(var i=0; i<len; i++) {  trs[i].className = 'r' + (i%2);  trs[i].onmouseover = function() {     this.className += ' over';   }  trs[i].onmouseout = function() {   this.className = this.className.replace(/s+over/, '');  } } var rows = t.rows; var numRows = rows.length; for(var i=0; i<numRows; i++) {  var cells = rows[i].cells;  var numCells = cells.length;  for(var j=0; j<numCells; j++) {   if(j && i)    break;   if(i) cells[j].onclick = new Function('sortByRow(this, ' + i + ');');   else cells[j].onclick = new Function('sortByCol(this, ' + j + ');');  } }}function sortByRow(th, r) { var t = th; while(t.tagName.toLowerCase() != 'table')  t = t.parentNode; var dir = 1; if(t.sortedRow) {  if(Math.abs(t.sortedRow) == r+1)   dir = t.sortedRow == r+1?-1:1; } var vals = new Array(); var val; var len = t.rows[r].cells.length; var cells = t.rows[r].cells; for(var i=1; i<len; i++) {  val = cells[i].innerHTML;  vals[vals.length] = {'val':val,'i':i}; } vals = vals.sort(sortCell); if(dir == -1)  vals = vals.reverse(); var newT = t.cloneNode(true); for(var j=0; j<t.rows.length; j++) {  if(j) {   var cName = newT.rows[j].cells[0].className.replace(/s*sorted(Asc|Desc)/, '');   if(j == r)    cName += (dir == 1?' sortedAsc':' sortedDesc');     newT.rows[j].cells[0].className = cName;    }  for(var i=0; i<vals.length; i++) {   newT.rows[j].replaceChild(t.rows[j].cells[vals[i].i].cloneNode(true), newT.rows[j].cells[i+1]);  } } t.parentNode.replaceChild(newT, t); newT.sortedRow = (r+1) * dir; smartTable(newT);}function sortByCol(th, c) { var t = th; while(t.tagName.toLowerCase() != 'table')  t = t.parentNode; var dir = 1; if(t.sortedCol) {  if(Math.abs(t.sortedCol) == c+1)   dir = t.sortedCol == c+1?-1:1;  } var vals = new Array(); var val; for(var i=1; i<t.rows.length; i++) {  if(!t.rows[i].cells[c]) val = 0;  else val = t.rows[i].cells[c].innerHTML;  vals[vals.length] = {'val':val,'i':i}; } vals = vals.sort(sortCell); if(dir == -1)  vals = vals.reverse(); var newT = t.cloneNode(true); var len = newT.rows[0].cells.length; var cells = newT.rows[0].cells; for(var i=0; i<len; i++) {  var cName = cells[i].className.replace(/s*sorted(Asc|Desc)/, '');  if(i == c)   cName += (dir == 1?' sortedAsc':' sortedDesc');  cells[i].className = cName; } for(var i=0; i<vals.length; i++) {  newT.rows[i+1].parentNode.replaceChild(t.rows[vals[i].i].cloneNode(true), newT.rows[i+1]); } t.parentNode.replaceChild(newT, t); newT.sortedCol = (c+1) * dir; smartTable(newT);}function sortCell(a, b) { if(a.val == b.val)  return 0; return a.val < b.val?-1:1;}// Multiple onload function created by: Simon Willison// http://simonwillison.net/2004/May/26/addLoadEvent/function addLoadEvent(func) {  var oldonload = window.onload;  if (typeof window.onload != 'function') {    window.onload = func;  } else {    window.onload = function() {      if (oldonload) {        oldonload();      }      func();    }  }}addLoadEvent(function() {  smartTableInit();});//--></script>

<table class="smartTable">  <tbody><tr class="r0">    <th>&nbsp;</th>    <th>Cow</th>    <th>Sheep</th>    <th>Pig</th>    <th>Dog</th>  </tr><tr class="r1">    <td>Name</td>    <td>Daisy</td>    <td>Fluffy</td>    <td>Oinky</td>    <td>Barky</td>  </tr><tr class="r0">    <td>Height</td>    <td>180cm</td>    <td>121cm</td>    <td>100cm</td>    <td>056cm</td>  </tr><tr class="r1">    <td>Deliciousness</td>    <td>85%</td>    <td>68%</td>    <td>93%</td>    <td>13%</td>  </tr><tr class="r0">    <td>Noise</td>    <td>Moo</td>    <td>Baa</td>    <td>Oink</td>    <td>Woof</td>  </tr></tbody></table>