Comment faites-vous pour remplir un tableau ?

**boboss123** · 08/02/2010, 16h14

bonjour,

comment faite vous pour remplir un tableau ?

actuellement, j'utilise cette methode (je cherche a remplir la 2nd colonne de mon tableau) :

Code :

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

1
2
3
	$("#tablePort tbody tr").each(function(i){
		$(this).children().eq(1).text(i);
	});

Est-ce comme ça qu'il faut faire ?

faut-il utiliser Jquery pour faire ce genre de chose ? quels sont les avantages/inconvénients par rapport aux methode classiques ?

merci d'avance

**danielhagnoul** · 08/02/2010, 22h35

Bonsoir.

Exemple :

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Manipulations d'une table</title>
	<style>
		body {
			background-color:#FFFFFF;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		table.tablesorter {
			width:95%;
			margin:12px auto;
			/* table-layout = problèmes */
			empty-cells:show;
			border-collapse:collapse;
			border-spacing:0px;
			border-width:1px;
			border-style:solid;
			border-color:#666666;
			background-color:#CDCDCD;
			color:#000000;
			font-size:0.9em;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		table.tablesorter caption {
			caption-side:top;
			padding-top:6px;
			padding-bottom:6px;
			text-align:center;
			font-size:1.2em;
			font-style:oblique;
			font-weight:bold;
			line-height:normal;
			letter-spacing:0.2em;
			color:#000000;
		}
		table.tablesorter thead tr th {
			border-width:1px;
			border-style:solid;
			border-color:#999999;
			background-color: #e6eeee;
			color:#000000;
			padding:6px;
			text-align:center;
			font-size:0.9em;
			font-style:normal;
			font-weight:bold;
			line-height:1.8em;
			letter-spacing:normal;
		}
		table.tablesorter tfoot tr th {
			border-width:1px;
			border-style:solid;
			border-color:#999999;
			background-color: #e6eeee;
			color:#000000;
			padding:6px;
			text-align:left;
			font-size:0.9em;
			font-style:italic;
			font-weight:normal;
			line-height:1.4em;
			letter-spacing:normal;
		}
		table.tablesorter thead tr .header {
			background-image:url(../images/bg.gif);
			background-repeat: no-repeat;
			background-position:left;
			cursor: pointer;
		}
		table.tablesorter tbody td {
			border-width:1px;
			border-style:solid;
			border-color:#999999;
			background-color:#FFFFFF;
			color:#000000;
			vertical-align:middle;
			padding:6px;
			text-align:left;
			font-size:0.9em;
			font-style:normal;
			font-weight:normal;
			line-height:1.2em;
			letter-spacing:normal;
		}
	</style>
	<script charset="CP-1252" src="../lib/jquery-1.4.1.min.js"></script>
	<script>
		$(function(){	
 
			var elClone = $("#affiche").clone(true);
 
				var tdlength = 10;
				var trlength = 25;
 
				var table = $("<table id='maTable' class='tablesorter'></table>").appendTo(elClone);
 
				var thead = $("<thead></thead>").appendTo(table);
				var tfoot = $("<tfoot></tfoot>").appendTo(table);
				var tbody = $("<tbody></tbody>").appendTo(table);
 
				var trhead = $("<tr></tr>").appendTo(thead);
				var trfoot = $("<tr></tr>").appendTo(tfoot);
 
				for(var i = 0; i < tdlength; i++) {
					$("<th>colonne " + i + "</th>").appendTo(trhead);
					$("<th>colonne " + i + "</th>").appendTo(trfoot);
				}
 
				var trbody = null;
 
				for(var j = 0; j < trlength; j++) {
					trbody = $("<tr></tr>").appendTo(tbody);
 
					for(var i = 0; i < tdlength; i++) {
						$("<td>ligne " + j + ", colonne " + i + "</td>").appendTo(trbody);
					}
				}
 
			$("#affiche").replaceWith(elClone);
 
		});
	</script>
</head>
<body>
	<div id="affiche"></div>
</body>
</html>

Faut-il utiliser jQuery pour faire ce genre de chose ? Quels sont les avantages/inconvénients par rapport aux méthodes classiques ?

Personnellement, j'utilise toujours jQuery ! Bien entendu, il faut rester raisonnable dans la taille du tableau.

Autre exemple : http://danielhagnoul.developpez.com/...estEvent4.html

**boboss123** · 09/02/2010, 10h37

ok merci pour ta reponse

Dans ton exemple tu montres comment créer entierement une table or mon ce que je veux faire c'est mettre à jour régulièrement (toutes les secondes) une table.

Est-ce qu'il faut a chaque fois créer une nouvelle table ou faut-il (comme dans mon exemple) ne changer que les champs concerné ? quelle est la methode la plus rapide ?
S'il ne faut changés que les champs concernés, est-ce que j'utilise la bonne méthode ?

**danielhagnoul** · 10/02/2010, 10h29

Bonjour.

Code :

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

1
2
3
4
// je cherche a remplir la 2nd colonne de mon tableau
$("#tablePort > tbody > tr").each(function(i, item){
	$(item).find("td:eq(1)").text(i);
});

**boboss123** · 10/02/2010, 13h38

ok merci beaucoup

Donc il faut bien modifier les champs que deplutot recréer a chaque fois le tableau ?

pour remplir le tableau, entre la fonction .text() et .html() c'est la même chose ou il y a en une qui est plus rapide que l'autre ?

**boboss123** · 10/02/2010, 16h09

j'ai un autre probleme sur une ligne avec fusion de cellule :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
						<tr class="tr_imp">
							<td rowspan="2">
							    <br/>aaaaaaa
							</td>
							<td><label><input type="checkbox" id="W0" name="W0" value="1"/> Activé</label></td>
							<td><label><input type="checkbox" id="W1" name="W1" value="1"/> Activé</label></td>
							<td><label><input type="checkbox" id="W2" name="W2" value="1"/> Activé</label></td>
							<td><label><input type="checkbox" id="W3" name="W3" value="1"/> Activé</label></td>
							<td><label><input type="checkbox" id="W4" name="W4" value="1"/> Activé</label></td>
							<td><label><input type="checkbox" id="W5" name="W5" value="1"/> Activé</label></td>
						</tr>

le code suivant ne fonctionne pas (ça me trouve 0 elements) :

Code :

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

1
2
3
 $("#myTable > tbody > tr:eq(6) > td > input").each(function(i){
    alert(i);
 });

=> ça vient de quoi (ça fonctionne avec les lignes qui n'ont pas de fusion de cellules) ?

**danielhagnoul** · 10/02/2010, 20h15

Bonsoir.

html() traite le texte et les tags HTML.

La présence de cellules fusionnées rend le tableau unique, le traitement doit bien entendu être adapté à chaque singularité.

**boboss123** · 11/02/2010, 13h09

Envoyé par boboss123

j'ai un autre probleme sur une ligne avec fusion de cellule :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
						<tr class="tr_imp">
							<td rowspan="2">
							    <br/>aaaaaaa
							</td>
							<td><label><input type="checkbox" id="W0" name="W0" value="1"/> Activé</label></td>
							<td><label><input type="checkbox" id="W1" name="W1" value="1"/> Activé</label></td>
							<td><label><input type="checkbox" id="W2" name="W2" value="1"/> Activé</label></td>
							<td><label><input type="checkbox" id="W3" name="W3" value="1"/> Activé</label></td>
							<td><label><input type="checkbox" id="W4" name="W4" value="1"/> Activé</label></td>
							<td><label><input type="checkbox" id="W5" name="W5" value="1"/> Activé</label></td>
						</tr>

le code suivant ne fonctionne pas (ça me trouve 0 elements) :

Code :

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

1
2
3
 $("#myTable > tbody > tr:eq(6) > td > input").each(function(i){
    alert(i);
 });

=> ça vient de quoi (ça fonctionne avec les lignes qui n'ont pas de fusion de cellules) ?

fallait juste mettre :

Code :

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

1
2
3
 $("#myTable > tbody > tr:eq(6) > td > label > input").each(function(i){
    alert(i);
 });

=> j'ai oublié une balise

**boboss123** · 11/02/2010, 13h16

Envoyé par danielhagnoul

Bonsoir.

html() traite le texte et les tags HTML.

La présence de cellules fusionnées rend le tableau unique, le traitement doit bien entendu être adapté à chaque singularité.

oui mais s'il n'y a rien de spécial dans la balise <td> de mon tableau (juste du texte), pour le remplir, il y a une des deux methode qui est plus adaptée (dans ton exemple tu as mis .text... j'aurais plutot mis .html) ?

**Bovino** · 11/02/2010, 13h32

Envoyé par boboss123

oui mais s'il n'y a rien de spécial dans la balise <td> de mon tableau (juste du texte), pour le remplir, il y a une des deux methode qui est plus adaptée (dans ton exemple tu as mis .text... j'aurais plutot mis .html) ?

Etonnant

Et si ton td avait contenu du HTML, tu aurais opté pour .text ?

**boboss123** · 11/02/2010, 15h12

Envoyé par Bovino

Etonnant

Et si ton td avait contenu du HTML, tu aurais opté pour .text ?

non ma remarque n'est "peut-être" pas si stupide que ça...

ces commandes ne font pas la même chose

Code :

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

1
2
1-	$("#cell1_1").html("<div>Salut les gas !</div>");
2-	$("#cell1_1").text("<div>Salut les gas !</div>");

Dans le premier cas, ça insère directement le texte dans le div alors que dans le second cas il y a des conversions sur la chaine pour transformer "<div>" en chaine de caractère html
=> c'est pour ça qu'il me semble que .html doit être plus rapide (à condition d'etre sur que la chaine rentrée est valide). Je n'ai pas raison ?

après il faut voir si le navigateur est plus rapide pour rafraichir l'ecran dans un cas ou l'autre...

**boboss123** · 11/02/2010, 16h55

aussi peut-on remplacer :

Code :

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

1
2
3
$("#tablePort > tbody > tr").each(function(i, item){
	$(item).find("td:eq(1)").text(i);
});

par :

Code :

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

1
2
3
$("#tablePort > tbody > tr").each(function(i){
	$(this).find("td:eq(1)").text(i);
});

?
=> ça à l'air de fonctionner...

Comment faites-vous pour remplir un tableau ?

jQuery

Discussions similaires

Partager

Partager