// (gH) -_- exemple1.js ; TimeStamp (unix) : 16 Octobre 2009 vers 15:11 var SORT_ROW_INDEX; var SORT_COL_INDEX; var thead = false; var tc = new Array(); // pour cloner les tableaux originaux il faut un tableau auxilliaire // ############################################################### function initialisationDesTableaux() { // ############################################################### // On cherche les tableaux dans la page dont la classe est triCol, triLig ou triTab // et suivant les cas, on complète la première ligne/colonne if (!document.getElementsByTagName) return ; // si le navigteur ne sait pas le faire, on quitte tbls = document.getElementsByTagName("table") ; // on met dans tbls tous les tableaux HTML de la page for (var ti=0;ti<tbls.length;ti++) { thisTbl = tbls[ti]; // si le tableau courant thisTbl a le style requis, // alors on lui applique la fonction correspondante if (((' '+thisTbl.className+' ').indexOf("triCol") != -1)) { rendTriableEnColonne(thisTbl); } //fin de si if (((' '+thisTbl.className+' ').indexOf("triLig") != -1)) { rendTriableEnLigne(thisTbl); } //fin de si if (((' '+thisTbl.className+' ').indexOf("triTab") != -1)) { rendTriableEnColonne(thisTbl); rendTriableEnLigne(thisTbl); /* non : rendTriable(thisTbl); */ } //fin de si } // fin de pour // on est alors pret à faire une copie des tableaux tbls = document.getElementsByTagName("table") ; // on met dans tbls tous les tableaux HTML de la page for (var ti=0;ti<tbls.length;ti++) { thisTbl = tbls[ti]; // on fait une copie de l'original tc[ti] = thisTbl.cloneNode(true); } // fin de pour } // fin de fonction initialisationDesTableaux // ############################################################### function rendTriableEnColonne(t) { // ############################################################### // Cette fonction insère un bouton pour chacune des cellules de la première ligne. // Dès qu'on clique : - soit on trie le tableau dans l'ordre croissant ou décroissant suivant le sens de la flèche // - soit on recharge le tableau original firstRow = testeEntete(t) ; if (!firstRow) { return ; } // s'il n'y a pas d'entete, on quitte // on rend chacune des cellules de l'entete cliquable for (var ic=0;ic<firstRow.cells.length;ic++) { var cell = firstRow.cells[ic]; // var txt = ts_getInnerText(cell); var txtHTML = sousArbreDom(cell,1,1) if (txtHTML.indexOf("triCol")==-1) { // on retire <th> et </th> txtHTML = txtHTML.replace(/<th>/g, ""); txtHTML = txtHTML.replace(/<\/th>/g, ""); cell.innerHTML = txtHTML + '<span class="sortheader" onclick="tri_col(this, '+ic+');return false;">' + symboleTri("col","h",1) + '</span>' // avant, c'était juste txt au lieu de txtHTML } ; // finsi } // fin pour } // fin de fonction rendTriableEnColonne // ############################################################### function tri_col(lnk, clid) { // ############################################################### // cette fonction permet de trier le tableau en lignes selon la colonne clid // lnk sert à connaitre le tableau qui contient la colonne ecrit_infos("tri_col("+lnk+","+clid+")") // on récupère le contenu des "<span...>" // car on y met l'attribut "sensTri" qui donne le sens du tri 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]; } // fin si } // fin pour var spantext = ts_getInnerText(span); var l=0; var td = lnk.parentNode; var column = clid ; var t = getParent(td,'TABLE'); if (t.rows.length <= 1) return; // on quitte s'il n'y a pas de colonne nsortfn = natureDuTriCol(t,column) SORT_COL_INDEX = column; var firstRow = new Array(); var newRows = new Array(); var newColumns = new Array(); for (var k=0;k<t.tBodies.length;k++) { if (!thead) { // on saute la première ligne for (var j=1;j<t.tBodies[k].rows.length;j++) { newRows[j-1] = t.tBodies[k].rows[j]; // newRows contient les lignes du tableau à trier } // fin pour } else { // on ne saute pas la première ligne for (var j=0;j<t.tBodies[k].rows.length;j++) { newRows[j] = t.tBodies[k].rows[j]; } // fin pour } // fin si } // fin pour sensTriAtt = span.getAttribute("senstri") ecrit_infos("triCol sens = "+sensTriAtt) // si le sens de tri est none, on reprend l'original if (sensTriAtt == 'o') { ARROW = symboleTri("col","h",1) span.setAttribute('senstri','h'); k=0; var m=0; var idtv= 0 ; while (m<tc.length) { for(var i=0;i<tc[m].rows[0].cells.length;i++) { // si on retrouve la bonne en-tete... if (trim(ts_getInnerText(t.rows[0].cells[column]))==trim(ts_getInnerText(tc[m].rows[0].cells[i]))) { // on peut recopier le tableau original cloné idtv = m ; for(var j=0;j<newRows.length;j++) { for(var k=0;k<newRows[0].cells.length;k++) { // c'est ici que tout se joue : il faut tout enlever avant de mettre la copie clonée laCase = newRows[j].cells[k] enleveLesAttributs(laCase) while (laCase.firstChild) { laCase.removeChild(laCase.firstChild) } cn = tc[m].rows[j+1].cells[k].cloneNode(true) laCase.appendChild( cn ) } // fin pour k } // fin pour j break; } // fin si } // fin pour i m++; } // fintant que } else { // sinon, on doit trier et changer le symbole ainsi que le "span" du sens de tri newRows.sort(sortfnCol); if (sensTriAtt == 'b') { // pour avoir un tri inverse, on utilise reverse ARROW = symboleTri("col","o",1) newRows.reverse(); span.setAttribute('senstri','o'); } else { // ou alors, on ajuste à changer la flèche et le span ARROW = symboleTri("col","b",1) span.setAttribute('senstri','b'); } // fin si // on a bien géré newRows, on le recopie dans le tableau de départ for (var i=0; i<newRows.length; i++) { if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) { t.tBodies[0].appendChild(newRows[i]); } // fin si } // fin pour } // fin si // on remet les boutons pour les autres colonnes var allspans = document.getElementsByTagName("span"); for (var ci=0;ci<allspans.length;ci++) { if (allspans[ci].className == 'triCol') { if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us? allspans[ci].innerHTML = symboleTri("col","h",0) } // fin si getParent } // allspans } // fin pour span.innerHTML = ARROW; } // fin de fonction tri_col // ############################################################### function rendTriableEnLigne(t) { // ############################################################### // Cette fonction insère un bouton pour chacune des cellules de la première colonne. // Dès qu'on clique : - soit on trie le tableau dans l'ordre croissant ou décroissant suivant le sens de la flèche // - soit on recharge le tableau original firstRow = testeEntete(t) ; if (!firstRow) { return ; } // s'il n'y a pas d'entete, on quitte // on rend chacune des cellules de la colonne 1 cliquable for (var il=0; il<t.rows.length; il++) { cell = t.rows[il].cells[0]; // var txt = ts_getInnerText(cell); var txtHTML = sousArbreDom(cell,1,1) if (txtHTML.indexOf("triLig")==-1) { // on retire <th> et </th> txtHTML = txtHTML.replace(/<th>/g, ""); txtHTML = txtHTML.replace(/<\/th>/g, ""); cell.innerHTML = '<span class="sortheader" onclick="tri_lig(this, '+ il + ');return false;">' + symboleTri("lig","d",1) + '</span>' + txtHTML; // avant, c'était juste txt } ; // finsi } // fin pour } // fin de fonction rendTriableEnLigne // ############################################################### function tri_lig(lnk,clid) { // ############################################################### // cette fonction permet de trier le tableau en colonne selon la ligne clid // lnk sert à connaitre le tableau qui contient la colonne // on récupère le contenu des "<span...>" // car on y met l'attribut "sensTri" qui donne le sens du tri ecrit_infos("tri_lig("+lnk+","+clid+")") //ecrit_infos("le parent est "+lnk.getParent()) var span; var l=0; for (var ci=0;ci<lnk.childNodes.length;ci++) { if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci]; } // fin pour ci var spantext = ts_getInnerText(span); var td = lnk.parentNode; var ligne = clid ; var t = getParent(td,'TABLE'); if (t.rows.length <= 1) return; // on quitte s'il n'y a pas de colonne sortfnLig = natureDuTriLig(t,ligne) SORT_ROW_INDEX = ligne; var newRows = new Array(); for (var k=0;k<t.tBodies.length;k++) { for (var j=0;j<t.tBodies[k].rows.length;j++) { newRows[j] = t.tBodies[k].rows[j]; } // fin pour j } // fin pour k var min_max; var k; var tmp; // on ne peut pas appliquer la meme technique que pour le tri des lignes // si le sens de tri est none, on reprend l'original sensTriAtt = span.getAttribute("senstri") ecrit_infos("triLig sens = "+sensTriAtt) if (sensTriAtt == 'o') { ecrit_infos("Lig partie none") ARROW = symboleTri("lig","d",1) span.setAttribute('senstri','d'); k=0; var m=0; while (m<tc.length) { for(var i=0;i<tc[m].rows.length;i++) { if (ts_getInnerText(t.rows[ligne].cells[0])==ts_getInnerText(tc[m].rows[i].cells[0])) { for(var j=0;j<newRows.length;j++) { for(var k=0;k<newRows[0].cells.length;k++) { // newRows[j].cells[k].innerHTML=ts_getInnerText(tc[m].rows[j].cells[k]); laCase = newRows[j].cells[k] enleveLesAttributs( laCase ) while (laCase.firstChild) { laCase.removeChild(laCase.firstChild) } cn = tc[m].rows[j].cells[k].cloneNode(true) laCase.appendChild( cn ) } // fin pour k } // fin pour j break; } // fin si } // fin pour i m++; } // fin tant } else { // sinon, on doit trier et changer le symbole ainsi que le "span" du sens de tri if (sensTriAtt == 'g') { // pour avoir un tri inverse, on for(var k=1;k<newRows[1].cells.length-1;k++) { min_max=k; for(var j=k+1;j<newRows[1].cells.length;j++) { if (sortfnLig(newRows[SORT_ROW_INDEX].cells[j],newRows[SORT_ROW_INDEX].cells[k])>0) { min_max=j; echangerCellule(tmp,newRows[SORT_ROW_INDEX].cells[k],newRows[SORT_ROW_INDEX].cells[min_max]); for(var i=0;i<newRows.length;i++) { if(i!=SORT_ROW_INDEX) { echangerCellule(tmp,newRows[i].cells[k],newRows[i].cells[min_max]); } // fin si } // fin pour i } // fin si sortfnLig } // fin pour j } // fin pour k ARROW = symboleTri("lig","o",1) span.setAttribute('senstri','o'); } else { // ou alors, on ajuste à changer la flèche et le span ARROW = symboleTri("lig","g",1) span.setAttribute('senstri','g'); for(var k=1;k<newRows[1].cells.length-1;k++) { min_max=k; for(var j=k+1;j<newRows[1].cells.length;j++) { if (sortfnLig(newRows[SORT_ROW_INDEX].cells[j],newRows[SORT_ROW_INDEX].cells[k])<0) { min_max=j; echangerCellule(tmp,newRows[SORT_ROW_INDEX].cells[k],newRows[SORT_ROW_INDEX].cells[min_max]); for (var i=0;i<newRows.length;i++) { if(i!=SORT_ROW_INDEX) { echangerCellule(tmp,newRows[i].cells[k],newRows[i].cells[min_max]); } //fin si } // fin pour i } // fin si sortfnLig } //fin pour j } // fin pour k } // fin si } // fin si // on remet les boutons pour les autres colonnes var allspans = document.getElementsByTagName("span"); for (var ci=0;ci<allspans.length;ci++) { if (allspans[ci].className == 'trilig') { if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us? allspans[ci].innerHTML = symboleTri("lig","d",0) } // fin si } // fin si } // pour span.innerHTML = ARROW; } // fin de fonction tri_lig // ############################################################### function ts_getInnerText(el) { // ############################################################### // cette fonction retourne le contenu d'un élément du tableau saisi en paramètre 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; } //fin de switch } //fin de pour return str; } // fin de fonction ts_getInnerText // ############################################################### function echangerCellule(tmp,cell1,cell2) { // ############################################################### tmp1 = sousArbreDom(cell1,1,1) tmp2 = sousArbreDom(cell2,1,1) cell1.innerHTML = tmp2 ; cell2.innerHTML = tmp1 ; } // fin de fonction // ############################################################### function echanger(tmp,cell1,cell2) { // ############################################################### tmp=ts_getInnerText(cell1); cell1.innerHTML=ts_getInnerText(cell2); cell2.innerHTML=tmp; } // fin de fonction // ############################################################### function ts_sort_numeric1(a,b) { // ############################################################### var aa = trim(ts_getInnerText(a)); aa = clean_num(aa); var bb = trim(ts_getInnerText(b)); bb = clean_num(bb); return compare_numeric1(aa,bb); } // fin de fonction // ############################################################### function compare_numeric1(a,b) { // ############################################################### var a = parseFloat(a); a = (isNaN(a) ? 0 : a); var b = parseFloat(b); b = (isNaN(b) ? 0 : b); return a - b; } // fin de fonction // ############################################################### function ts_sort_caseinsensitive1(a,b) { // ############################################################### aa = ts_getInnerText(a).toLowerCase(); bb = ts_getInnerText(b).toLowerCase(); if (aa==bb) { return 0; } // fin si if (aa<bb) { return -1; } // fin si return 1; } // fin de fonction // ############################################################### function getParent(el, pTagName) { // ############################################################### if (el == null) { return null; } else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) { return el; } else { return getParent(el.parentNode, pTagName); } // finsi } // fin de fonction // ############################################################### function sort_date(date) { // ############################################################### // y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 19XX dt = "00000000"; if (date.length == 11) { mtstr = date.substr(3,3); mtstr = mtstr.toLowerCase(); switch(mtstr) { case "jan": var mt = "01"; break; case "feb": var mt = "02"; break; case "mar": var mt = "03"; break; case "apr": var mt = "04"; break; case "may": var mt = "05"; break; case "jun": var mt = "06"; break; case "jul": var mt = "07"; break; case "aug": var mt = "08"; break; case "sep": var mt = "09"; break; case "oct": var mt = "10"; break; case "nov": var mt = "11"; break; case "dec": var mt = "12"; break; // default: var mt = "00"; } // fin de switch dt = date.substr(7,4)+mt+date.substr(0,2); return dt; } else if (date.length == 10) { if (europeandate == false) { dt = date.substr(6,4)+date.substr(0,2)+date.substr(3,2); return dt; } else { dt = date.substr(6,4)+date.substr(3,2)+date.substr(0,2); return dt; } // fin si } else if (date.length == 8) { yr = date.substr(6,2); if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; } // fin si if (europeandate == true) { dt = yr+date.substr(3,2)+date.substr(0,2); return dt; } else { dt = yr+date.substr(0,2)+date.substr(3,2); return dt; } // fin si } // fin si return dt; } // fin de fonction // ############################################################### function ts_sort_date(a,b) { // ############################################################### dt1 = sort_date(ts_getInnerText(a.cells[SORT_COL_INDEX])); dt2 = sort_date(ts_getInnerText(b.cells[SORT_COL_INDEX])); if (dt1==dt2) { return 0; } // fin si if (dt1<dt2) { return -1; } // fin si return 1; } // fin de fonction // ############################################################### function ts_sort_numeric(a,b) { // ############################################################### var aa = trim(ts_getInnerText(a.cells[SORT_COL_INDEX])); aa = clean_num(aa); var bb = trim(ts_getInnerText(b.cells[SORT_COL_INDEX])); bb = clean_num(bb); return compare_numeric(aa,bb); } // fin de fonction // ############################################################### function compare_numeric(a,b) { // ############################################################### var a = parseFloat(a); a = (isNaN(a) ? 0 : a); var b = parseFloat(b); b = (isNaN(b) ? 0 : b); return a - b; } // fin de fonction // ############################################################### function ts_sort_caseinsensitive(a,b) { // ############################################################### aa = ts_getInnerText(a.cells[SORT_COL_INDEX]).toLowerCase(); bb = ts_getInnerText(b.cells[SORT_COL_INDEX]).toLowerCase(); if (aa==bb) { return 0; } // fin si if (aa<bb) { return -1; } // fin si return 1; } // fin de fonction // ############################################################### function ts_sort_default(a,b) { // ############################################################### aa = ts_getInnerText(a.cells[SORT_COL_INDEX]); bb = ts_getInnerText(b.cells[SORT_COL_INDEX]); if (aa==bb) { return 0; } // fin si if (aa<bb) { return -1; } // fin si return 1; } // fin de fonction // ############################################################### 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"); } // fin si } // fin de fonction // ############################################################### function clean_num(str) { // ############################################################### str = str.replace(new RegExp(/[^-?0-9.]/g),""); return str; } // fin de fonction clean_num // ############################################################### function trim(s) { // ############################################################### return s.replace(/^\s+\s+$/g, ""); } // fin de fonction trim // ############################################################### // ############################################################### function ecrit_infos(mesTxt) { // ############################################################### mt = document.getElementById("infos") mt.value += "\n" + mesTxt ; return(false) } // fin de fonction ecrit_infos // ############################################################### function reset_infos(mesTxt) { // ############################################################### mt = document.getElementById("infos") mt.value = "" return(false) } // fin de fonction reset_infos // ############################################################### function symboleTri(org,sens,avecSpan) { // ############################################################### // org vaut lig" ou "col" // sens = "o" : on revient à l'original // "h" : vers le haut // "b" : vers le bas // "d" : vers la droite // "g" : vers la gauche if (org=="col") { cla = "triCol" } else { cla = "triLig" } symb = sens fond = "transparent" if (sens=='d') { symb = "▸" ; fond = "vert_clair" } if (sens=='h') { symb = "▴" ; fond = "vert_clair" } if (sens=='b') { symb = "▾" ; fond = "orange" } if (sens=='g') { symb = "◂" ; fond = "orange" } if (sens=='o') { symb = "o" ; fond = "original" } if (avecSpan==1) { leSymbole = '<span class="'+cla+'" senstri="'+sens+'">' } else { leSymbole = '' } leSymbole += '<input class="'+fond+'" type="button" value="'+symb+'" />' if (avecSpan==1) { leSymbole += '</span>' } return(leSymbole) } // fin de fonction reset_infos // ############################################################### function testeEntete(t) { // ############################################################### if (t.rows && t.rows.length > 0) { if (t.tHead && t.tHead.rows.length > 0) { var firstRow = t.tHead.rows[t.tHead.rows.length-1]; thead = true; } else { var firstRow = t.rows[0]; } //fin si } // fin si return(firstRow) } // fin de fonction testeEntete // ############################################################### function natureDuTriCol(t,column) { // ############################################################### sortfnCol = ts_sort_caseinsensitive; var itm = ""; var i = 0; while (itm == "" && i < t.tBodies[0].rows.length) { var itm = ts_getInnerText(t.tBodies[0].rows[i].cells[column]); itm = trim(itm); // on supprime les espaces avant et apres la chaine itm itm=clean_num(itm); if (itm.substr(0,4) == "<!--" || itm.length == 0) { itm = ""; } // fin si i++; } // fin de tant que // ecrit_infos(" natureDuTri pour : "+itm) if (itm == "") return(sortfnCol) ; sortfnCol = ts_sort_caseinsensitive; if (itm.match(/^-?[£$€Û¢´]\d/)) { sortfnCol = ts_sort_numeric; } // fin de si if (itm.match(/^-?(\d+[,\.]?)+(E[-+][\d]+)?%?$/)) { sortfnCol = ts_sort_numeric; } // fin si return(sortfnCol) } // fin de fonction natureDuTriCol // ############################################################### function natureDuTriLig(t,ligne) { // ############################################################### sortfnLig = ts_sort_caseinsensitive1; var itm = ""; var i = 0; while (itm == "" && i < t.tBodies[0].rows[0].cells.length) { var itm = ts_getInnerText(t.tBodies[0].rows[ligne].cells[i]); itm = trim(itm); // on supprime les espaces avant et apres la chaine itm itm = clean_num(itm); if (itm.substr(0,4) == "<!--" || itm.length == 0) { itm = ""; } i++; } // fin tant que if (itm == "") return(sortfnLig) ; sortfnLig = ts_sort_caseinsensitive1; if (itm.match(/^\d\d[\/\.-][a-zA-z][a-zA-Z][a-zA-Z][\/\.-]\d\d\d\d$/)) sortfnLig = ts_sort_date; if (itm.match(/^\d\d[\/\.-]\d\d[\/\.-]\d\d\d{2}?$/)) sortfnLig = ts_sort_date; if (itm.match(/^-?[£$€Û¢´]\d/)) sortfnLig = ts_sort_numeric1; if (itm.match(/^-?(\d+[,\.]?)+(E[-+][\d]+)?%?$/)) sortfnLig = ts_sort_numeric1; return(sortfnLig) } // fin de fonction natureDuTriLig // ############################################################### function enleveLesAttributs(maCase) { // ############################################################### // nombre d'enfants nbe = maCase.childNodes.length if (maCase.childNodes[0]) { // type du premier noeud tpe = maCase.childNodes[0].nodeType // si un seul enfant et de type texte if ( (nbe==1) && tpe==3) { // on peut détruire tous les attributs atd = maCase.attributes for (ida=0;ida<atd.length;ida++) { maCase.removeAttribute(atd[ida].name) } // fin pour } // fin si } // fin si // imparfait : on 'enlève pas tout (entre <span sur élement // et <td class, il y a un 'hic' } // fin de fonction enleveAttributs // ############################################################### function surligne(elt) { // ############################################################### elt.className += " surligne " } // fin de fonction surligne // ############################################################### function desurligne(elt) { // ############################################################### var eltcn = elt.className var er = new RegExp("(surligne)","g") ; // ecrit_infos("className avant "+eltcn) eltcn = eltcn.replace(er, ' ') // ecrit_infos("il reste encore "+eltcn) elt.className = eltcn //} ; } // fin de fonction desurligne // ############################################################### // ############################################################### // -- fin du fichier exemple1.js // ############################################################### // ###############################################################
Retour à la page principale de (gH)