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

Comment faites-vous pour remplir un tableau ?

jQuery

Vue hybride

Discussions similaires

Partager

Partager