Discussion :

[kevin254kl]

Bonjour à tous, pourriez vous m'aider?

Voilà j'ai un tableau de cette forme,

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
echo '<table class="table table-hover table-primary nomargin">';
 
	echo '<th class="text-center"> Hostname </th>';
	echo '<th class="text-center">  Prenom </th>';
	echo '<th class="text-center"> Nom </th>';
	echo '<th class="text-center"> Login </th>';
	echo '<th class="text-center"> Service </th>';
	echo '<th class="text-center"> Localisation </th>';
	echo '<th class="text-center"> Costcenter </th>';
	echo '<th class="text-center"> Statut </th>';
	echo '<th class="text-center"> Type </th>';
	echo '<th class="text-center"> Marque </th>';
	echo '<th class="text-center"> N° Serie </th>';
	echo '<th class="text-center"> N° SBE </th>';
	echo '<th class="text-center"> Type de disque </th>';
	echo '<th class="text-center"> Action </th>';
 
    foreach  ($bdd->query($sql) as $produit) {
		echo '<tr id="ligne_tableau">';
			print '<td ondblclick="addInput(this)" id="hostname'.$produit['id_inventaire'].'">'.$produit['hostname'].'</td>';
			print '<td ondblclick="addInput(this)" id="prenom'.$produit['id_inventaire'].'">'.$produit['prenom'].'</td>';
			print '<td ondblclick="addInput(this)" id="nom'.$produit['id_inventaire'].'">'.$produit['nom'].'</td>';
			print '<td ondblclick="addInput(this)" id="login'.$produit['id_inventaire'].'">'.$produit['login'].'</td>';
			print '<td ondblclick="addInput(this)" id="service'.$produit['id_inventaire'].'">'.$produit['service'].'</td>';
			print  '<td ondblclick="addInput(this)" id="localisation'.$produit['id_inventaire'].'">'.$produit['localisation'].'</td>';
			print '<td ondblclick="addInput(this)" id="costcenter'.$produit['id_inventaire'].'">'.$produit['costcenter'].'</td>';
			print '<td ondblclick="addInput(this)" id="statut'.$produit['id_inventaire'].'">'.$produit['statut'].'</td>';
			print  '<td ondblclick="addInput(this)" id="type'.$produit['id_inventaire'].'">'.$produit['type'].'</td>';
			print '<td ondblclick="addInput(this)" id="marque'.$produit['id_inventaire'].'">'.$produit['marque'].'</td>';
			print '<td ondblclick="addInput(this)" id="num_serie'.$produit['id_inventaire'].'">'.$produit['num_serie'].'</td>';
			print  '<td ondblclick="addInput(this)" id="num_sbe'.$produit['id_inventaire'].'">'.$produit['num_sbe'].'</td>';
			print '<td ondblclick="addInput(this)" id="type_disque'.$produit['id_inventaire'].'">'.$produit['type_disque'].'</td>';
			print '<td>
						<a href="#" onclick="mod_tab('.$produit['id_inventaire'].')"  class="btn btn-info"><span class="glyphicon glyphicon-pencil" title="Validation de la modification"></span></a>
						<a href="#" id="'.$produit['id_inventaire'].'"  class="btn btn-danger ol-md-offset-1 remove-row-table"><span class="glyphicon glyphicon-remove" title="Suppression de la ligne"></span></a>
				  </td>';
		echo '</tr>';
 
	}
	echo '</table>';

avec cette fonction jquery

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
$(document).ready(function(){ 
	$("#search").on("keyup", function() {
		var value = $(this).val();
 
		$("table tr").each(function(index) {
			if (index !== 0) {
 
				$row = $(this);
 
				var id = $row.find("td:first").text();
 
				if (id.indexOf(value) !== 0) {
					$row.hide();
				}
				else {
					$row.show();
				}
			}
		});
	});
});

la fonction cherche dans la première colonne si le texte entré existe et garde uniquement la ligne. Problème je voudrais que la fonction cherche dans toutes les colonnes. Je ne sais pas comment faire.

Merci de votre aide.

[SpaceFrog]

avec filter() ...

colle nous le html généré du tableau ...

Sinon ça peut donner un truc comme ça https://jsfiddle.net/rudotdxp/1/

[SpaceFrog]

Ou en jouant sur le class
https://jsfiddle.net/rudotdxp/3/

[kevin254kl]

Bonjour merci de votre réponse,

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
<table class="table table-hover table-primary nomargin"><th class="text-center"> Hostname </th><th class="text-center">  Prenom </th><th class="text-center"> Nom </th><th class="text-center"> Login </th><th class="text-center"> Service </th><th class="text-center"> Localisation </th><th class="text-center"> Costcenter </th><th class="text-center"> Statut </th><th class="text-center"> Type </th><th class="text-center"> Marque </th><th class="text-center"> N° Serie </th><th class="text-center"> N° SBE </th><th class="text-center"> Type de disque </th><th class="text-center"> Action </th><tr id="ligne_tableau"><td ondblclick="addInput(this)" id="hostname17">a</td><td ondblclick="addInput(this)" id="prenom17">b</td><td ondblclick="addInput(this)" id="nom17">c</td><td ondblclick="addInput(this)" id="login17">d</td><td ondblclick="addInput(this)" id="service17">e</td><td ondblclick="addInput(this)" id="localisation17">f</td><td ondblclick="addInput(this)" id="costcenter17">g</td><td ondblclick="addInput(this)" id="statut17"></td><td ondblclick="addInput(this)" id="type17">ih</td><td ondblclick="addInput(this)" id="marque17">j</td><td ondblclick="addInput(this)" id="num_serie17">k</td><td ondblclick="addInput(this)" id="num_sbe17"></td><td ondblclick="addInput(this)" id="type_disque17">m</td><td>
						<a href="#" onclick="mod_tab(17)"  class="btn btn-info"><span class="glyphicon glyphicon-pencil" title="Validation de la modification"></span></a>
						<a href="#" id="17"  class="btn btn-danger ol-md-offset-1 remove-row-table"><span class="glyphicon glyphicon-remove" title="Suppression de la ligne"></span></a>
				  </td></tr><tr id="ligne_tableau"><td ondblclick="addInput(this)" id="hostname18">a</td><td ondblclick="addInput(this)" id="prenom18">b</td><td ondblclick="addInput(this)" id="nom18">c</td><td ondblclick="addInput(this)" id="login18">d</td><td ondblclick="addInput(this)" id="service18">e</td><td ondblclick="addInput(this)" id="localisation18">f</td><td ondblclick="addInput(this)" id="costcenter18">g</td><td ondblclick="addInput(this)" id="statut18"></td><td ondblclick="addInput(this)" id="type18">ih</td><td ondblclick="addInput(this)" id="marque18">j</td><td ondblclick="addInput(this)" id="num_serie18">k</td><td ondblclick="addInput(this)" id="num_sbe18"></td><td ondblclick="addInput(this)" id="type_disque18">m</td><td>
						<a href="#" onclick="mod_tab(18)"  class="btn btn-info"><span class="glyphicon glyphicon-pencil" title="Validation de la modification"></span></a>
						<a href="#" id="18"  class="btn btn-danger ol-md-offset-1 remove-row-table"><span class="glyphicon glyphicon-remove" title="Suppression de la ligne"></span></a>
				  </td></tr><tr id="ligne_tableau"><td ondblclick="addInput(this)" id="hostname19">a</td><td ondblclick="addInput(this)" id="prenom19">b</td><td ondblclick="addInput(this)" id="nom19">test</td><td ondblclick="addInput(this)" id="login19">d</td><td ondblclick="addInput(this)" id="service19">e</td><td ondblclick="addInput(this)" id="localisation19">f</td><td ondblclick="addInput(this)" id="costcenter19">g</td><td ondblclick="addInput(this)" id="statut19"></td><td ondblclick="addInput(this)" id="type19">ih</td><td ondblclick="addInput(this)" id="marque19">j</td><td ondblclick="addInput(this)" id="num_serie19">k</td><td ondblclick="addInput(this)" id="num_sbe19"></td><td ondblclick="addInput(this)" id="type_disque19">m</td><td>
						<a href="#" onclick="mod_tab(19)"  class="btn btn-info"><span class="glyphicon glyphicon-pencil" title="Validation de la modification"></span></a>
						<a href="#" id="19"  class="btn btn-danger ol-md-offset-1 remove-row-table"><span class="glyphicon glyphicon-remove" title="Suppression de la ligne"></span></a>
				  </td></tr><tr id="ligne_tableau"><td ondblclick="addInput(this)" id="hostname20">a</td><td ondblclick="addInput(this)" id="prenom20">b</td><td ondblclick="addInput(this)" id="nom20">c</td><td ondblclick="addInput(this)" id="login20">d</td><td ondblclick="addInput(this)" id="service20">e</td><td ondblclick="addInput(this)" id="localisation20">f</td><td ondblclick="addInput(this)" id="costcenter20">g</td><td ondblclick="addInput(this)" id="statut20"></td><td ondblclick="addInput(this)" id="type20">ih</td><td ondblclick="addInput(this)" id="marque20">j</td><td ondblclick="addInput(this)" id="num_serie20">k</td><td ondblclick="addInput(this)" id="num_sbe20"></td><td ondblclick="addInput(this)" id="type_disque20">m</td><td>
						<a href="#" onclick="mod_tab(20)"  class="btn btn-info"><span class="glyphicon glyphicon-pencil" title="Validation de la modification"></span></a>
						<a href="#" id="20"  class="btn btn-danger ol-md-offset-1 remove-row-table"><span class="glyphicon glyphicon-remove" title="Suppression de la ligne"></span></a>
				  </td></tr><tr id="ligne_tableau"><td ondblclick="addInput(this)" id="hostname21">a</td><td ondblclick="addInput(this)" id="prenom21">b</td><td ondblclick="addInput(this)" id="nom21">c</td><td ondblclick="addInput(this)" id="login21">d</td><td ondblclick="addInput(this)" id="service21">e</td><td ondblclick="addInput(this)" id="localisation21">f</td><td ondblclick="addInput(this)" id="costcenter21">g</td><td ondblclick="addInput(this)" id="statut21"></td><td ondblclick="addInput(this)" id="type21">ih</td><td ondblclick="addInput(this)" id="marque21">j</td><td ondblclick="addInput(this)" id="num_serie21">k</td><td ondblclick="addInput(this)" id="num_sbe21"></td><td ondblclick="addInput(this)" id="type_disque21">m</td><td>
						<a href="#" onclick="mod_tab(21)"  class="btn btn-info"><span class="glyphicon glyphicon-pencil" title="Validation de la modification"></span></a>
						<a href="#" id="21"  class="btn btn-danger ol-md-offset-1 remove-row-table"><span class="glyphicon glyphicon-remove" title="Suppression de la ligne"></span></a>
				  </td></tr><tr id="ligne_tableau"><td ondblclick="addInput(this)" id="hostname22">b</td><td ondblclick="addInput(this)" id="prenom22">b</td><td ondblclick="addInput(this)" id="nom22">c</td><td ondblclick="addInput(this)" id="login22">d</td><td ondblclick="addInput(this)" id="service22">e</td><td ondblclick="addInput(this)" id="localisation22">f</td><td ondblclick="addInput(this)" id="costcenter22">g</td><td ondblclick="addInput(this)" id="statut22"></td><td ondblclick="addInput(this)" id="type22">ih</td><td ondblclick="addInput(this)" id="marque22">j</td><td ondblclick="addInput(this)" id="num_serie22">k</td><td ondblclick="addInput(this)" id="num_sbe22"></td><td ondblclick="addInput(this)" id="type_disque22">m</td><td>
						<a href="#" onclick="mod_tab(22)"  class="btn btn-info"><span class="glyphicon glyphicon-pencil" title="Validation de la modification"></span></a>
						<a href="#" id="22"  class="btn btn-danger ol-md-offset-1 remove-row-table"><span class="glyphicon glyphicon-remove" title="Suppression de la ligne"></span></a>
				  </td></tr></table>

[SpaceFrog]

https://jsfiddle.net/rudotdxp/5/

[kevin254kl]

Merci de votre aide, mais l'exemple que vous me donner ne fonctionne que pour la première colonne si je tape d alors rien n'apparait, j'ai trouvé celui-là http://jsfiddle.net/9hGym/293/ qui fonctionne sur plusieurs colonnes mais je n'arrive pas à l'adapter https://jsfiddle.net/rudotdxp/6/ .

[EddiGordo]

Bonjour,

C'est parce que

Code :

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

$('#table tbody tr')

cible un objet qui n'existe pas.
En jQuery et en CSS, # est un sélecteur d'objet par id alors que l'objet table dans le DOM n'en possède pas.
Donc il faut ajouter l'attribut id="table" dans la définition de la table ou bien modifier le sélecteur jQuery en

Code :

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

$('table tbody tr')

mais dans ce cas, ça posera un problème s'il y a plusieurs objets table sur la page.

[kevin254kl]

Super merci, je n'avais pas vue que cela ciblé l'id.

[SpaceFrog]

fonctionne que pour la première colonne

je n'avais pas compris cela dans l'enoncé du problème, mais cela se gère simplement en faisant la recherche dans toutes les colonnes au lieu de juste le première :eq(0)

https://jsfiddle.net/rudotdxp/7/