Comment faites-vous pour remplir un tableau ?

Version imprimable

08/02/2010, 16h14
boboss123

Comment faites-vous pour remplir un tableau ?
bonjour,

comment faite vous pour remplir un tableau ?

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

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

Bonsoir.

Exemple :

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

Citation:

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

09/02/2010, 10h37
boboss123

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 ?

Bonjour.

Code:

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);
});

10/02/2010, 13h38
boboss123

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 ?

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

Code:

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:

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) ?

10/02/2010, 20h15
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é.

Citation:

Envoyé par boboss123

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

Code:

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:

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:

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

=> j'ai oublié une balise

11/02/2010, 13h16
boboss123

Citation:

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) ?
11/02/2010, 13h32
Bovino

Citation:

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 :koi:
Et si ton td avait contenu du HTML, tu aurais opté pour .text ?
11/02/2010, 15h12
boboss123
Citation:

Envoyé par Bovino

Etonnant :koi:
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:

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

aussi peut-on remplacer :

Code:

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

par :

Code:

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

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