modifier un tableau avec javascript

Version imprimable

Salut à tous,

je voudrais pouvoir éffacer des colonnes d'un grand tableau htlm.

j'ai deja ce code qui fonctionne mais il est d'une lenteur à faire peur.

si quelqu'un pouvais m'aider ca serait cool.

voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
//*************************************************************************************************
// fonction pour rendre visible un element choisi(d) ayant pour id(a) du tableau choisi(c)
// a = id de l'element a effacer
// c = id du tableau dans lequel on cherche
// d = nom du tag recherche ex: td,tr,...
//*************************************************************************************************
 
function see_col(a,c,d){
var tds=document.getElementById(c).getElementsByTagName(d);
var r= new RegExp("^"+a+".+");
for (var i=0; i<tds.length; i++) { 
  if(r.test(tds[i].id)){ 
   document.getElementById(tds[i].id).style.display="block"; 
 		} 
	} 
}

Merci d'avance pour l'aide que vous pourrez me fournir.

Lemmings

12/11/2005, 10h25
javatwister

hum; commençons peut-être par un display='none' ?
12/11/2005, 10h27
lemmings

je sais mais que ce soit block ou none le problème reste entier ;-)
12/11/2005, 10h28
javatwister

après, veux-tu "effacer" ou "rendre invisible"? c'est complètement différent;

je comprends mal le test et la regexp...

pourquoi tu ne fais pas:

Code:

1
2
3
function see_col(a){
document.getElementById(a).style.display="block"; 
}

12/11/2005, 10h34
lemmings

le test avec la regexp est justifier dans le sense que je dois scanner tout le tableau a la recherche des éléments a éffacer. car je ne connais que le debut de l'id a éffacer .

pour exemple

je dois rendre invisible une colonne d'un tableau dont je sais que tous les id des td qui compose cette colonne commence par "kap" et le reste est généré pour rendre chaque td unique. donc j'ai des td avec comme id kap1568459.

voila en gros le problème
12/11/2005, 10h39
javatwister

eh bien... ton code semble parfait alors :mrgreen:
12/11/2005, 10h45
lemmings

le probleme c'est qu'il met 5 minutes voir plus pour éffacer une colonne du tableau.

le document html qui contient le tableau fait 4 mb.

n'y aurait-il pas moyen d'ameliorer les performances de ce javascript ou est-ce que c'est lier a la puissance de la machine client.
12/11/2005, 10h52
javatwister

créer un attribut commun pour toutes les cellules d'une même colonne?

ça simplifie déjà;
12/11/2005, 10h53
lemmings

cad ? tu ferais ca comment ?
12/11/2005, 10h56
lemmings

en fait je viens de faire un petit script pour voir combien de td le script doit scanner et il y en a 29619 .... 8O 8O 8O

donc je comprends pourquoi il est si lent

en générant ton tableau, tu donnes un attribut "col" au td; la valeur de col doit correspondre au début de l'id, comme "kap", dans ton exemple;

Code:

mon_td.setAttribute("col","kap");

et après, ta fonction:
Code:

1 2 3 4 5 6 7 8 9 10 11 function see_col(a,c,d){ var tds=document.getElementById(c).getElementsByTagName(d); for(i=0; i!= tds.length; i++) { if(tds[i].getAttribute("col")==a){ tds[i].style.display='none' } } }

12/11/2005, 11h09
lemmings

ca devrait allez plus vite a ton avis ?
12/11/2005, 11h10
javatwister

je n'en sais fichtrement rien :lol:

tu peux toujours essayer et concocter un ptit timer!
12/11/2005, 11h12
lemmings

je vais essayé et je te dis quoi.
12/11/2005, 11h18
javatwister
encore mieux à mon avis, un nom d'attribut unique par colonne, dont le nom et la valeur équivaut au début de l'id; ce qui donnera:
Code:

1 2 3 4 5 6 7 mon_td.setAttribute("kap","kap"); ... if(tds[i].getAttribute(a)){ tds[i].style.display='none' }
12/11/2005, 11h26
lemmings

en fait je ne vois pas tres bien ou je dois mettre le mon_td.setAttribute :-)

mon tableau est généré a partir de plusieurs loop en coldfusion donc je vois pas tres bien ou je pourrais l'utiliser
12/11/2005, 11h31
javatwister

chaque cellule avec son id est bien générée dans une boucle?

eh bien au même moment, tu crées l'attribut en utilisant la même variable que pour l'id;

je ne connais rien à coldfusion mais peut-être peux-tu indiquer le bout de code où sont créées les cellules?

voila quelque td

entre # c'est egale a une variable

Code:

1
2
3
4
5
6
7
 
<cfloop from ="1" to="125" index="a">
<td align="right" "kap#STADE##ATELIER#.#num0#.#num1#.#num2#.#num3##MATNR##tot#17">0</td>
<td align="right" "kap#STADE##ATELIER#.#num0#.#num1#.#num2#.#num3##MATNR##tot#18">0</td>
<td align="right" "kap#STADE##ATELIER#.#num0#.#num1#.#num2#.#num3##MATNR##tot#19">0</td>
<td align="right" "kap#STADE##ATELIER#.#num0#.#num1#.#num2#.#num3##MATNR##tot#20">0</td>
</cfloop>

12/11/2005, 11h50
javatwister

bah, je te confirme que je n'y comprends rien...

c'est un extrait du code qui crée des cellules avec leur id?

teste ça, si tu veux:

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
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
<title>...</title> 
 
<style type="text/css"> 
#tab1 td { 
text-align:center;
width:40px;
height:30px;
background-color:#ff0000; 
font-weight:bold 
} 
 
</style> 
 
 
</head> 
 
<body> 
 
<p>
<strong>En cliquant sur une cellule quelconque, on efface la colonne.</strong>
<br />
Effectivement, le travail est long, que ce soit pour générer la page, d'ailleurs, 
ou pour gérer toutes les cellules;<br />
(là, je n'ai que 1000 lignes)
</p>
 
<div id="cadre"></div> 
 
<script type="text/javascript"> 
 
function efface(col){
var tt=document.getElementById("tab1").getElementsByTagName("td");
 
	for(i=0;i<tt.length;i++){
		if(tt[i].getAttribute(col)){ 
		     tt[i].style.display='none' 
		}
	}
}
 
 
var tab=["zero","un","deux","trois","quatre","cinq","six","sept","huit","neuf"];
var t=document.createElement("table"); 
t.setAttribute("id","tab1"); 
 
var tb=document.createElement("tbody"); 
t.appendChild(tb); 
 
for(i=0;i<1000;i++){ 
	l=document.createElement("tr"); 
	for(j=0;j<10;j++){ 
		c=document.createElement("td");
		c.attr=tab[j];
		c.appendChild(document.createTextNode(tab[j])); 
		c.setAttribute(tab[j],tab[j]);
		c.onclick=function(){
			efface(this.attr)
		}
	l.appendChild(c); 
	}; 
 
tb.appendChild(l); 
}; 
 
document.getElementById("cadre").appendChild(t); 
 
</script> 
 
 
</body> 
 
</html>

chez moi, Ffx met une demi-seconde à effacer la colonne et IE 8 secondes!

12/11/2005, 12h06
lemmings

en fait toi tu créé ton tableau en js et moi je le créé en htlm et dupliquer avec coldfusion en y incluant les données venant de la database.

donc je ne sais pas si je sais utiliser le setAttribute

je te donne aussi du code une fois le tableau généré :

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
 
<td align="right" id="ordDRPFL.0111044851"><span id="1.ordDRPFL.0111044851"></span></td>
		<td align="right" id="ordDRPFL.0111044852"><span id="2.ordDRPFL.0111044852"></span></td>
		<td align="right" id="ordDRPFL.0111044853"><span id="3.ordDRPFL.0111044853"></span></td>
		<td align="right" id="ordDRPFL.0111044854"><span id="4.ordDRPFL.0111044854"></span></td>
		<td align="right" id="antDRPFL.0111044855"><span id="5.antDRPFL.0111044855"></span></td>
		<td align="right" id="antDRPFL.0111044856"><span id="6.antDRPFL.0111044856"></span></td>
		<td align="right" id="antDRPFL.0111044857"><span id="7.antDRPFL.0111044857"></span></td>
		<td align="right" id="antDRPFL.0111044858"><span id="8.antDRPFL.0111044858"></span></td>
		<td align="right" id="chaDRPFL.0111044859"><span id="9.chaDRPFL.0111044859"></span></td>
		<td align="right" id="chaDRPFL.01110448510"><span id="10.chaDRPFL.01110448510"></span></td>
		<td align="right" id="chaDRPFL.01110448511"><span id="11.chaDRPFL.01110448511"></span></td>
		<td align="right" id="chaDRPFL.01110448512"><span id="12.chaDRPFL.01110448512"></span></td>
		<td align="right" id="kapDRPFL.01110448517"><span id="17.kapDRPFL.01110448517"></span></td>
		<td align="right" id="kapDRPFL.01110448518"><span id="18.kapDRPFL.01110448518"></span></td>
		<td align="right" id="kapDRPFL.01110448519"><span id="19.kapDRPFL.01110448519"></span></td>
		<td align="right" id="kapDRPFL.01110448520"><span id="20.kapDRPFL.01110448520"></span></td>
		<td align="right" id="nserDRPFL.01110448521"><span id="21.nserDRPFL.01110448521"></span></td>
		<td align="right" id="nserDRPFL.01110448522"><span id="22.nserDRPFL.01110448522"></span></td>
		<td align="right" id="nserDRPFL.01110448523"><span id="23.nserDRPFL.01110448523"></span></td>
		<td align="right" id="nserDRPFL.01110448524"><span id="24.nserDRPFL.01110448524"></span></td>
		<td align="right" id="sserDRPFL.01110448525"><span id="25.sserDRPFL.01110448525"></span></td>
		<td align="right" id="sserDRPFL.01110448526"><span id="26.sserDRPFL.01110448526"></span></td>
		<td align="right" id="sserDRPFL.01110448527"><span id="27.sserDRPFL.01110448527"></span></td>
		<td align="right" id="sserDRPFL.01110448528"><span id="28.sserDRPFL.01110448528"></span></td>
		<td align="right" id="dserDRPFL.01110448529"><span id="29.dserDRPFL.01110448529"></span></td>
		<td align="right" id="dserDRPFL.01110448530"><span id="30.dserDRPFL.01110448530"></span></td>
		<td align="right" id="dserDRPFL.01110448531"><span id="31.dserDRPFL.01110448531"></span></td>
		<td align="right" id="dserDRPFL.01110448532"><span id="32.dserDRPFL.01110448532"></span></td>
		<td align="right" id="nspeDRPFL.01110448533"><span id="33.nspeDRPFL.01110448533"></span></td>
		<td align="right" id="nspeDRPFL.01110448534"><span id="34.nspeDRPFL.01110448534"></span></td>
		<td align="right" id="nspeDRPFL.01110448535"><span id="35.nspeDRPFL.01110448535"></span></td>
		<td align="right" id="nspeDRPFL.01110448536"><span id="36.nspeDRPFL.01110448536"></span></td>
		<td align="right" id="sspeDRPFL.01110448537"><span id="37.sspeDRPFL.01110448537"></span></td>
		<td align="right" id="sspeDRPFL.01110448538"><span id="38.sspeDRPFL.01110448538"></span></td>
		<td align="right" id="sspeDRPFL.01110448539"><span id="39.sspeDRPFL.01110448539"></span></td>
		<td align="right" id="sspeDRPFL.01110448540"><span id="40.sspeDRPFL.01110448540"></span></td>
		<td align="right" id="dspeDRPFL.01110448541"><span id="41.dspeDRPFL.01110448541"></span></td>
		<td align="right" id="dspeDRPFL.01110448542"><span id="42.dspeDRPFL.01110448542"></span></td>
		<td align="right" id="dspeDRPFL.01110448543"><span id="43.dspeDRPFL.01110448543"></span></td>
		<td align="right" id="dspeDRPFL.01110448544"><span id="44.dspeDRPFL.01110448544"></span></td>

maintenant tu as le vrais nom des td et tu comprendras mieux pourquoi j'ai utilisé une regexp

ne t'occupe pas du span il est juste la pour recevoir des données de d'autres td par le biais de javascript

12/11/2005, 12h20
javatwister

à mon avis, pas de problème majeur pour ajouter un attribut html dans chaque ligne en même temps que l'id;
pour le coup, l'attribut n'est évidemment pas politiquement correct pour le w3c mais ça peut valoir le coup;

peux-tu donc arriver à un truc du genre:

Code:

<td align="right" ordDRPFL="ordDRPFL" id="ordDRPFL.0111044852"><span id="2.ordDRPFL.0111044852"></span></td>

?
12/11/2005, 12h22
lemmings

je vais essayer je te tiens au courant

merci de ton aide en tous cas

j'ai ajouté les attributs j'ai modifié le js mais tjs pas d'évolution (tjs aussi lent).

le probleme c'est qu'il prend en compte tous les td du tableau n'y aurait-il pas moyen de filtrer les td avant ?
Code:

1 2 3 4 5 6 7 8 9 10 11 function hide_col(a,c,d,e){ alert(e); var tds=document.getElementById(c).getElementsByTagName(d); alert(tds.length); for(var i=0;i<tds.length;i++){ if(tds[i].getAttribute(e)){ tds[i].style.display="none"; } } }

Citation:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function hide_col(a,c,d,e){ alert(e); var tds=document.getElementById(c).getElementsByTagName(d); alert(tds.length); for(var i=0;i<tds.length;i++){ if(tds[i].getAttribute(e)){ tds[i].style.display="none"; } } }
c'est exactement ce que je fais et aucune sélection n'est possible avant le scan du tableau de <td>;

autre solution, crée un attribut name pour chaque cellule (même technique) en changeant sa valeur selon la colonne;
appelle la colonne par getElementsByTagName() et tu auras tes cellules beaucoup plus vite;

2 bémols:
"name" n'est pas valide w3c et IE intègre parfois mal cet attribut quand il est créé dynamiquement;

Voila j'ai trouvé une soluce en mixant les idées de plusieurs.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function hide_col(a,c,d,e){ var t=document.getElementById(c); for ( var l=0;l<t.rows.length;l++ ) { for ( var i=0;i<t.rows[l].cells.length;i++ ) { if ( t.rows[l].cells[i].ord == e) { document.getElementById(t.rows[l].cells[i].id).style.display='none'; } } } }
je sais aller chercher un attribut, le tester et le tout sur la ligne et non sur le td.

enfin soit le principale c'est que ca fonctionne.

un grand Merci a tous ceux qui mon aidé dans cette recherche.

Lemmings