Voici mon code javascript a l aide

Fermé
truitas - 6 juin 2008 à 17:28
 truitas - 13 juin 2008 à 16:45
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 (en lettre:week end, semaine, journée etc),difficultée(donnée chiffrées), prix , type (bien être, sportif etc)

3 pouvez vous me donner les lignes de code qu'il faut modifier?
merci
voic le code que j'ai inséré dans une page html vierge:
<!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>
A voir également:

3 réponses

Réponse 1 / 3
alexdelareunion Messages postés 545 Date d'inscription dimanche 18 mars 2007 Statut Membre Dernière intervention 9 octobre 2023 142
6 juin 2008 à 20:11
Franchement, je sais pas si c'est moi qui vieilli, mais j'ai encore jamais vu un javascript aussi moisi, je passe la main
1
ShaBoo Messages postés 392 Date d'inscription mercredi 12 septembre 2007 Statut Membre Dernière intervention 5 septembre 2009 50
6 juin 2008 à 20:28
Bonsoir,

le but de ce site est d'aider les autres, et ceci quelque soit leurs niveaux.

Ton commentaire ne fait pas avancer les choses.

A bon entendeur ... Salut.
0
truitas Messages postés 44 Date d'inscription vendredi 23 mai 2008 Statut Membre Dernière intervention 25 décembre 2009 5
6 juin 2008 à 22:30
salut alexdelareunion,
n 'hesites pas à me donner un lien ou je pourrais en avoir un mieux, si tu maîtrise ce langage, je suis preneur de ce que tu pourrait élaborer ou de tous les conseils que tu pourrais me donner afin d'améliorer celui-ci.
merci
0
Réponse 2 / 3
alexdelareunion Messages postés 545 Date d'inscription dimanche 18 mars 2007 Statut Membre Dernière intervention 9 octobre 2023 142
7 juin 2008 à 05:16
Ok autant pour moi,
Ce que je voulais dire c'est que j'ai ESSAYE mais après avoir passé une heure à corriger des erreurs, à indenter, et à mettre des ; au bout des lignes, j'ai constaté que le programme ne fonctionnait toujours pas correctement.
Je pense que tu devrais pouvoir trouver un tableau de ce genre codé de manière plus simple, avec un ajout de ligne dynamique. C'est à dire qu'entre tes balises '<body></body>' on ne devrait pas voir autre chose qu'un 'squelette' de tableau.
Tu peux par exemple aller voir le site http://www.editeurjavascript.com/
ou éventuellement trouver un site sur lequel il y a exactement le tableau qu'il te faut en fonctionnement , pour le récupérer (si aucun droit d'auteur ne s'y opose)
Regarde par exemple ici
http://www.javascriptfr.com
(Fais un copier coller de ce code dans un nouveau fichier texte nommé 'labo.html', tu dois enlever tous les '#' qui se trouvent au début des lignes pour que cela fonctionne)
0
truitas Messages postés 44 Date d'inscription vendredi 23 mai 2008 Statut Membre Dernière intervention 25 décembre 2009 5
7 juin 2008 à 10:44
salut,
y a pas de mal je te remercie de d etre penche sur la question, que penses tu de celui-ci est il paramétrable pour un débutant comme moi:il y 3 fichier javascript et un css

http://htmltabletools.iassa.com/
merci
0
Réponse 3 / 3
alexdelareunion Messages postés 545 Date d'inscription dimanche 18 mars 2007 Statut Membre Dernière intervention 9 octobre 2023 142
9 juin 2008 à 06:01
En effet il a l'air mieux documenté et le résultat est joli
0
truitas
13 juin 2008 à 16:45
salut,
j'ai presque réglé mon problème en créant un tableau spry dynamic.
il y plein d'ex qui pourraient t'interresser:
http://labs.adobe.com/technologies/spry/demos/

j'ai toujours un problème: je voudrais rajouter une colonne avec un image faisant lien vers un diaporama et une colonne avec un gif faisant lien vers un fichier pdf.
a tout hasard je temet le code du fichier html et celui xml:

<!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>tableau choix séjour raquette: Bauges, Chartreuse</title>
<style type="text/css">
<!--
.Style49 {color: #FF6600}
-->
</style>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript">
var dsMassifs = new Spry.Data.XMLDataSet("tab_raquette.xml", "massifs/massif");
</script>
</head>
<body>
<div spry:region="dsMassifs">
<table width="950" height="294" border="1" align="center">
<tr>
<th width="78" scope="col"spry:sort="@id"><div align="center" class="Style49">Massif</div></th>
<th width="84" scope="col"spry:sort="durée"><div align="center" class="Style49">Durée</div></th>
<th width="164" scope="col"spry:sort="thème"><div align="center" class="Style49">Thème</div></th>
<th width="77" scope="col"spry:sort="niveau"><div align="left">Niveau</div></th>
<th width="77" scope="col"spry:sort="niveau"><div align="center">Fichiers</div></th>
</tr>

<tr spry:repeat="dsMassifs">
<td><div align="center">{@id}</div></td>
<td><div align="center">{durée}</div></td>
<td><div align="center">{thème}</div></td>
<td><div align="left">{niveau}</div></td>
<td><div align="left">{fichier}</div></td> </tr>
</table>
</div>
</body>
</html>

xml:
<?xml version="1.0" encoding="utf-8"?>
<massifs xmlns="http://www.foo.com/employees">
<massif id="Bauges">
<durée>Week end</durée>
<thème>raquette et bien être</thème>
<niveau>1</niveau>
<fichier>Fiche circuit.pdf</fichier>
</massif>
<massif id="Chartreuse">
<durée>4 jours</durée>
<thème>raquette et gastronomie </thème>
<niveau>2</niveau>
<fichier>Fiche circuit.pdf</fichier>
</massif>
</massifs>
0

Discussions similaires

sertissage des cables rj45
lekludo -
brupala -

Bonjour,
Je voudrais savoir quel est le code de couleur pr le sertissage dun cable reseau droit et croise. De plus comment faire pr sertir les cables pr monter des switch en cascade?


Configuration: Android / Firefox 50.0

--
 

7 réponses