tableaux dynamique:+large+decol+tri differnt
Bonjour,
j'ai trouvé ce code permettant d'effectuer le tri des colonnes d'un tableaux et j'ai plusieurs questions (je suis débutant):
1: comment faire pour ajouter des lignes et des colonnes au tableau?
2:j'aimerais faire un tableaux avec des colonnes: Massif, Durée (tri alphabetique :week end, semaine, journée etc),difficultée(tri numérique ou alphabétique), prix(tri numerique) , type (tri alphabetique :bien être, sportif etc)
3 comment re-dimensionner le tableaux?
4 pouvez vous me donner les lignes de code qu'il faut modifier?
5 si vous connaissez d'autres codes facilement parametrable, je suis preneur?
merci
voic le code que j'ai inséré dans une page html vierge:(il y a aussi des prob de balises)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<body>
<html>
<HEAD>
<SCRIPT>
// Code créé par francktfr pour www.systeme-d.net
function SortArray(aText,aHtml,Index,Order){
var Test = Order > 0 ? "aText["+Index+"][b] > aText["+Index+"][a]" : "aText["+Index+"][b] < aText["+Index+"][a]" // Choix de la comparaison
for (a = 0; a < aText[Index].length; a++) // Liste de tous les éléments du tableau
{
for (b = 0; b < aText[Index].length ;b++) // Re-liste tous les éléments pour les comparer à Numbers[a]
{
if (eval(Test)) {
for (i=0; i<aText.length; i++){ // Mise a jour des tableaux
Copy = aText[i][b]; aText[i][b] = aText[i][a]; aText[i][a] = Copy
Copy = aHtml[i][b]; aHtml[i][b] = aHtml[i][a]; aHtml[i][a] = Copy
}
}
}
}
}
function IsDate(sDate){ // retourne true si c'est une date valide
if (sDate.length < 8){return false}
var iDay = sDate.substring(0,2)
var iMonth = sDate.substring(3,5)
var iYear = sDate.substring(6)
iDay = iDay*1
iMonth = (iMonth*1)-1
iYear = iYear*1
var rDate = new Date(iYear,iMonth,iDay,0,0)
if(rDate.toString() == "NaN"){return false}
return true
}
function cDate(sDate){ // Convertie une date du format JJ/MM/AAAA en date JavaScript
var iDay = sDate.substring(0,2)
var iMonth = sDate.substring(3,5)
var iYear = sDate.substring(6)
iDay = iDay*1
iMonth = (iMonth*1)-1
iYear = iYear*1
var rDate = new Date(iYear,iMonth,iDay,0,0)
return(rDate)
}
if (eval("window.captureEvents")) {
window.captureEvents(Event.CLICK);
}
document.onclick = clicked;
function clicked(ObjE){
var flag = (window.Event)? true : false;
var nid = (flag)? ObjE.target : window.event.srcElement;
if(nid.title=="actionTri"){
TableOrder(nid, nid.id);
}
}
function TableOrder(oCell, Dir){ // Dir 1: Croissant, -1: Décroissant
var flag = (window.Event)? true : false;
//Firefox, Netscape
if(flag){
while (oCell.tagName != "TD"){oCell = oCell.parentNode} // determine la cellule sélectionnée
var oTable = oCell.parentNode
while (oTable.tagName != "TABLE"){oTable = oTable.parentNode} // determine l'objet table parent
var index = -1
for (c=0; c<oTable.rows[0].cells.length; c++){if (oTable.rows[0].cells[c]==oCell){index=c}} // determine l'index de la cellule
var RowNb = 0
var aHtmlTable = new Array() // Tableau de contenu HTML
var aTextTable = new Array() // Tableau de valeur
for (c=0; c<oTable.rows[0].cells.length; c++){ // sur toutes les cellules
var ColonneHtml = new Array()
var ColonneText = new Array()
var RowNb = 0
for (r=0; r<oTable.rows.length; r++){ // de toutes les rangées nommées "TableDatas"
if (oTable.rows[r].id == "TableDatas"){
ColonneHtml[RowNb] = oTable.rows[r].cells[c].innerHTML // met a jour le tableau de colonne correspondant
ColonneText[RowNb] = IsDate(oTable.rows[r].cells[c].innerHTML) ? cDate(oTable.rows[r].cells[c].innerHTML) : oTable.rows[r].cells[c].innerHTML
RowNb++
}
}
aHtmlTable[c] = ColonneHtml
aTextTable[c] = ColonneText
for (a=0; a<ColonneHtml.length; a++){aHtmlTable[c][a]=ColonneHtml[a]}
for (a=0; a<ColonneText.length; a++){aTextTable[c][a]=ColonneText[a]}
}
RowNb=0
SortArray(aTextTable,aHtmlTable,index,Dir) // Tri des données
for (x=0; x<oTable.rows[0].cells.length; x++){ // Remplacement des données dans le tableau HTML
RowNb=0
for (y=0; y<oTable.rows.length; y++){
if (oTable.rows[y].id == "TableDatas"){
oTable.rows[y].cells[x].innerHTML= aHtmlTable[x][RowNb]
RowNb++
}
}
}
//IE
}else{
while (oCell.tagName != "TD"){oCell = oCell.parentElement} // determine la cellule sélectionnée
var oTable = oCell.parentElement
while (oTable.tagName != "TABLE"){oTable = oTable.parentElement} // determine l'objet table parent
var index = -1
for (c=0; c<oTable.rows[0].cells.length; c++){if (oTable.rows[0].cells[c]==oCell){index=c}} // determine l'index de la cellule
var RowNb = 0
var aHtmlTable = new Array() // Tableau de contenu HTML
var aTextTable = new Array() // Tableau de valeur
for (c=0; c<oTable.rows[0].cells.length; c++){ // sur toutes les cellules
var ColonneHtml = new Array()
var ColonneText = new Array()
var RowNb = 0
for (r=0; r<oTable.rows.length; r++){ // de toutes les rangées nommées "TableDatas"
if (oTable.rows[r].id == "TableDatas"){
ColonneHtml[RowNb] = oTable.rows[r].cells[c].innerHTML // met a jour le tableau de colonne correspondant
ColonneText[RowNb] = IsDate(oTable.rows[r].cells[c].innerText) ? cDate(oTable.rows[r].cells[c].innerText) : oTable.rows[r].cells[c].innerText
RowNb++
}
}
aHtmlTable[c] = ColonneHtml
aTextTable[c] = ColonneText
for (a=0; a<ColonneHtml.length; a++){aHtmlTable[c][a]=ColonneHtml[a]}
for (a=0; a<ColonneText.length; a++){aTextTable[c][a]=ColonneText[a]}
}
RowNb=0
SortArray(aTextTable,aHtmlTable,index,Dir) // Tri des données
for (x=0; x<oTable.rows[0].cells.length; x++){ // Remplacement des données dans le tableau HTML
RowNb=0
for (y=0; y<oTable.rows.length; y++){
if (oTable.rows[y].id == "TableDatas"){
oTable.rows[y].cells[x].innerHTML= aHtmlTable[x][RowNb]
RowNb++
}
}
}}
}
</SCRIPT>
<STYLE>
.Table{font: 12 Arial; text-align: center; border: 1 solid black}
.Order{font: 12 Arial; cursor: hand; font-weight: bold; padding-left: 5; padding-right: 5}
</STYLE>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1 CLASS="Table">
<TR BGCOLOR=#CCCCCC>
<TD><SPAN title="actionTri" id="-1" CLASS="Order">▼</SPAN>Date<SPAN title="actionTri" id="1" CLASS="Order">▲</SPAN></TD>
<TD><SPAN title="actionTri" id="-1" CLASS="Order">▼</SPAN>Données 1<SPAN title="actionTri" id="1" CLASS="Order">▲</SPAN></TD>
<TD><SPAN title="actionTri" id="-1" CLASS="Order">▼</SPAN>Données 2<SPAN title="actionTri" id="1" CLASS="Order">▲</SPAN></TD>
<TD><SPAN title="actionTri" id="-1" CLASS="Order">▼</SPAN>Données 3<SPAN title="actionTri" id="1" CLASS="Order">▲</SPAN></TD>
</TR>
<TR BGCOLOR=#EEEEEE ID=TableDatas><TD>01/02/2003</TD><TD>2</TD><TD>3</TD><TD>Bidule</TD></TR>
<TR BGCOLOR=#DDDDDD ID=TableDatas><TD>02/02/2003</TD><TD>1</TD><TD>2</TD><TD>Machin</TD></TR>
<TR BGCOLOR=#EEEEEE ID=TableDatas><TD>03/01/2003</TD><TD>3</TD><TD>1</TD><TD>Truc</TD></TR>
<TR BGCOLOR=#DDDDDD ID=TableDatas><TD>06/02/2003</TD><TD>5</TD><TD>1</TD><TD>Personne</TD></TR>
<TR BGCOLOR=#EEEEEE ID=TableDatas><TD>05/02/2003</TD><TD>2</TD><TD>4</TD><TD>Autre</TD></TR>
<TR BGCOLOR=#CCCCCC><TD>Total</TD><TD>13</TD><TD>11</TD><TD></TD></TR>
</TABLE>
</BODY>
</html>
