l'outil HTMLTableTools

**Jim_Nastiq** · 26/04/2006, 15h26

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

**Jim_Nastiq** · 27/04/2006, 09h15

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

!

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

)

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

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

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

**Jim_Nastiq** · 27/04/2006, 14h06

Bon j'abandonne cette solution ca fait trop de temps perdu a chercher l'erreur

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**javatwister** · 27/04/2006, 14h49

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Jim_Nastiq** · 27/04/2006, 15h12

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...

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

onload="emulHover()"

et ma fonction emulhover est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

**javatwister** · 27/04/2006, 16h42

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Jim_Nastiq** · 27/04/2006, 17h17

merci pour ta disponibilité et pour ton aide

l'outil HTMLTableTools

JavaScript

Discussions similaires

Partager

Partager