Discussion :

[arthuro45]

Bonsoir,

Le but de cette fonction (createSelect) est de générer des listes déroulantes en ayant seulement l'id d'un tableau html.

Les listes s'affichent au bon endroit dans le tableau html, mais chacune d'elles contient toutes les données de toutes les colonnes.

Comment boucler correctement pour ne pas alimenter les listes déroulantes avec le contenu de tout le tableau, mais seulement le contenu de la colonne correspondante à la liste déroulante ?

C'est la variable valTd qui est en cause.
Les lignes qui posent problème se situent en la 11 et la 17eme ligne.

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
function createSelect(tab)
{
	var h = IdTd(tab); // Raméne le nom des classes des td.
	var valTd = []; // Tableau qui contiendra le contenu des listes déroulantes.
	var namePreOption = 'Tous';
	var valuePreOption = '-1';
	var preOption = '<option value=" ' + valuePreOption + ' "> -- ' + namePreOption + ' -- </option>';
 
	for(i = 0; i <= h.length; i++) {
 
		$.each( h, function() {
			$( "." + this ).each( function( i, item ){ // Je ramène les valeurs de la colonne td du tableau html
				valTd.push( '<option value="' + $( item ).text() + '">' + $( item ).text() + '</option>' );
			});
		});
 
		$("#" + tab +' tr:eq(0)').children('th:eq('+i+')').append( '<th><select id="s' + i + '">' + preOption + valTd.join(" ") + '</select></th>');
 
	}
}
 
// Si vous voulez tester voici la fonction appelé dans createSelect :
function IdTd(tab) // Raméne le nom des classes des td
{
	var Id = [];
	$('#' + tab + ' tr:eq(2)').children('td').each( function() { Id.push($(this).attr('class')); });
	return Id;
}
 
// Utilisation : 
$(document).ready(function() {
createSelect('tableau');
});

Un petit jeu de test

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
<table id="tableau" name="tableau" border="1">
	<thead>
		<tr>
			<th>Date</th>
			<th>N° dépo.</th>
			<th>Nom</th>
			<th>Raison sociale</th>
			<th>Nb. colis</th>
		</tr>
	<thead>
	<tbody>
		<tr>
			<td class="date">2011-11-17 00:00:00</td>
			<td class="depo">540254</td>
			<td class="nom">popo</td>
			<td class="rais">Café</td>
			<td class="nbCol"></td>
		</tr>
		<tr>
			<td class="date">2011-12-12 00:00:00</td>
			<td class="depo">540255</td>
			<td class="nom">riri</td>
			<td class="rais">Tabac</td>
			<td class="nbCol"></td>
		</tr>
		<tr>
			<td class="date">2012-01-02 00:00:00</td>
			<td class="depo">540239</td>
			<td class="nom">toto</td>
			<td class="rais">Presse</td>
			<td class="nbCol"></td>
		</tr>
		<tr>
			<td class="date">2012-01-18 00:00:00</td>
			<td class="depo">540877</td>
			<td class="nom">kiki</td>
			<td class="rais">Tabac</td>
			<td class="nbCol"></td>
		</tr>
	</tbody>
</table>

[arthuro45]

J'ai trouvé une solution, après chaque itération je vide le tableau qui contient les donnée de la colonne et ça fonctionne. Sans doute y avait-il plus simple ou mieux écrit...

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
$.each( h, function(i) {
 
		// Construit les options :
		$( '.' + this ).each( function( i, item ){ 
				valTd.push( '<option value="' + $( item ).text() + '">' + $( item ).text() + '</option>' );
		});
 
		// Construit les select :
		$('#' + tab +' tr:eq(0)').children('th:eq('+i+')').append('<th><select id="s'+i+'">' + preOption + '</select></th>');
		// Ajoute les options aux select :
		$.each(valTd, function(val, text) {
						$('#s'+i).append(
						$('<option></option').val(val).html(text)
		);})
 
              valTd = []; // On vide la tableau après chaque itération.
 
});