l'outil HTMLTableTools

Version imprimable

26/04/2006, 15h26
Jim_Nastiq

l'outil HTMLTableTools

Je ne sais pas si vousl e connaissez mais c'est un script qui permet de gerer les tableaux html de facon interressantes(genre surlignage au passage de la souris, change la couleur d'une ligne clickée, recupere l'id de la ligne clickée,...)

mon probleme est le suivant: je tente d'utiliser ce script a partir d'un script cgi(perl). j'ai donc changé les chemins d'acces aux differents fichier du script HTMLTableTools mais lors du test lorsque mon script cgi se lance il fait planter IE (et mon script cgi est bon puisque sans l'utilisation du script javascript il fonctionne!)

suis je clair?et si oui quelqu'un connait il le probleme ? merci
27/04/2006, 09h15
Jim_Nastiq

Bon j'ai du nouveau,comme ce sujet motiv' pas les foules :mouarf: !

J'ai tenter d'executer la page HTML sous FireFox le script se lance et au bout de quelques secondes : une fenetre m'indique que les script a surement planté donc je dois choisir : Continuer ou stopper le script!

Au 1er essai : Je choisit d'arreter, resultat mon tableau est afficher et une partie des fonctions offertes par le script JS est fonctionnel , deja je suis etonné(comme ca plante direct sous IE 8O )

Au 2eme essai : Je choisit de continuer, resultat une 2eme fenetre(la meme) au bout de qq secondes la je stop et............... le JS a encore plus de fonction qui marche 8O

Au 3eme essai: je continue (apres la 2eme fenetre) et la script se termine de lui meme pour offrir semble t'il toutes les fonctionnalités du JS 8O 8O 8O

Je sais plus quoi penser! il y a tout de meme des probleme c'est sur ! mais pourquoi FF ca passe et pas IE(je sais IE c'est de la M**** ;) )

si quelqu'un veut voir le code et m'aider a resoudre ce probleme ,fairtes moi signe ;) ! merci
27/04/2006, 14h06
Jim_Nastiq
Bon j'abandonne cette solution ca fait trop de temps perdu a chercher l'erreur :arf:

par contre je vais avoir besoin de votre aide pour reussir a modifier les lignes des tableau selon differents evenements souris! je souhaite changer de couleur au passage de la souris et aussi changer de couleur apres un click et retour a la couleur d'origine apres un second click(en effet j'alterne par 2 couleurs chaque ligne pour une meilleure lisibilité)

j'ai reussi avec onmouseover et onmouseout pour le surlignage au passage de la souris!

j'ai reussi a choper le click avec cette fonction JS(que je lance avec un onload dans la balise body)
Code:

1 2 3 4 5 6 7 8 TR = document.getElementsByTagName('tr'); for(i in TR) { TR[i].onclick = function() { this.bgColor = (this.bgColor=='')?'#FFFFFF':''; } }
cependant j'ai pas reussi a retrouver la couleur d'origine de la ligne!

et enfin je n'arrive pas a faire fonctionner les 2 fonctionnalités conjointement :?

merci de m'eclaircir

bon, sans trop connaître ce que tu veux exactement, voilà un code basique:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<style type="text/css">
td {
width:50px;
color:#000000;
border:1px solid #000000;
}
 
.un {
background-color:cyan;
}
.deux {
background-color:#ffff00;
}
.trois {
background-color:#ffffff;
}
.quatre {
background-color:#ff0000;
}
</style>
 
 
</head>
<body>
 
<table>
<tr class="un">
<td>un</td>
<td>deux</td>
<td>trois</td>
<td>quatre</td>
<td>cinq</td>
</tr>
<tr class="deux">
<td>un</td>
<td>deux</td>
<td>trois</td>
<td>quatre</td>
<td>cinq</td>
</tr>
<tr class="un">
<td>un</td>
<td>deux</td>
<td>trois</td>
<td>quatre</td>
<td>cinq</td>
</tr>
<tr class="deux">
<td>un</td>
<td>deux</td>
<td>trois</td>
<td>quatre</td>
<td>cinq</td>
</tr>
</table>
<script type="text/javascript">
var t=document.getElementsByTagName("table")[0].rows;
for(i in t){
 t[i].cl=t[i].className;
 t[i].onmouseover=function(){
  this.className="trois";
 }
 t[i].onmouseout=function(){
  this.className=this.cl;
 }
 t[i].onclick=function(){
  this.className= this.className=="quatre" ? this.cl : "quatre";
 }
}
</script>

je te remercie pour ton aide ;) !

Cependant j'ai finalement trouvé une solution qui fonctionne a peu pret selon mes désir! je vous la confie si ca interesse certains...:roll:

je met donc en place mon tableau avec alternance des couleurs de ligne:
Code:

1 2 3 <TR bgColor="#7B7BCD" onclick="this.bgColor = (this.bgColor=='')?'#7B7BCD':''"> <TR bgcolor="#0000CC" onclick="this.bgColor=(this.bgColor=='')?'#0000CC':''">
ensuite dans le body je met:

Code:

onload="emulHover()"

et ma fonction emulhover est :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function emulHover() { if(document.all) { TR = tab.getElementsByTagName('tr'); for(i in TR) { TR[i].className = 'ieTR'; TR[i].onmouseover = function() { this.className = 'ieTRhover'; } TR[i].onmouseout = function() { this.className = 'ieTR'; } } } }
avec le style suivant :
Code:

1 2 3 4 5 6 7 .ieTR, .ieTRhover{ width:92px;} .ieTRhover, TR:hover{ background-color: #00FF66; }
ca fonctionne donc! seul petit desagrement c'est que le mouseover est "plus prioritaire" que le onclick du coup quand on passe sur une ligne deja clickée on la surligne egalement! c'est pas trop important cependant!

oui donc c'est bien ce que je pensais, rien de compliqué;
je me permets de te reposter mon code avec la dernière option voulue, en espérant que tu pourras le visualiser quelque part:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
<style type="text/css">
td {
width:50px;
color:#000000;
border:1px solid #000000;
}
 
.un {
background-color:cyan;
}
.deux {
background-color:#ffff00;
}
.trois {
background-color:#ffffff;
}
.quatre {
background-color:#ff0000;
}
</style>
 
 
</head>
<body>
 
<table>
<tr class="un">
<td>un</td>
<td>deux</td>
<td>trois</td>
<td>quatre</td>
<td>cinq</td>
</tr>
<tr class="deux">
<td>un</td>
<td>deux</td>
<td>trois</td>
<td>quatre</td>
<td>cinq</td>
</tr>
<tr class="un">
<td>un</td>
<td>deux</td>
<td>trois</td>
<td>quatre</td>
<td>cinq</td>
</tr>
<tr class="deux">
<td>un</td>
<td>deux</td>
<td>trois</td>
<td>quatre</td>
<td>cinq</td>
</tr>
</table>
<script type="text/javascript">
var t=document.getElementsByTagName("table")[0].rows;
for(i in t){
t[i].cl=t[i].className;
t[i].onmouseover=function(){
if(this.className!="quatre"){ 
this.className="trois";
}
}
t[i].onmouseout=function(){
if(this.className!="quatre"){ 
this.className=this.cl;
}
}
t[i].onclick=function(){
this.className= this.className=="quatre" ? this.cl : "quatre";
}
}
</script>
 
</body>
</html>

27/04/2006, 17h17
Jim_Nastiq

merci pour ta disponibilité et pour ton aide;)