Masquer les lignes d'une TABLE Bootstrap

**merou19** · 19/05/2020, 18h18

Bonjour à tous,

J'ai fait une petite page pour tester une fonctionnalité que je veux mettre en place sur mon site. Je suis débutant en Jquery, et j'aimerai votre aide svp !

J'ai une table mise en page avec Bootstrap, et qui contient un petit formulaire pour saisir une valeur servant de filtre dans une colonne.

J'ai mis pour chaque ligne de ma table id="filtre_tr", et je veux que mon code Jquery trouve les lignes où la 3eme colonne a une valeur commençant par le filtre saisi dans le formulaire, et n'affiche que ces lignes, c'est à dire masque toutes les autres lignes, en leur mettant display: none.

J'ai trouvé sur le web des exemples de Jquery, mais je n'y arrive pas. Au clic sur le bouton 'filtrer', ça ne fait rien du tout.

Voici mon code complet, si vous voyez d'où ça vient :

Code HTML :

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
<html lang="fr">
<head>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
	<div class="container">
		<form method="POST">
			<p><label>Filtre : </label><input id="filtre" type="text" required></p>
			<p><input id="btn_filtre" type="button" value="Filtrer"/></p>
			<table class="table table-bordered table-hover">
				<thead class="thead-light">
					<tr class="row no-gutters border border-dark">
						<th class="col-1">A</th>
						<th class="col-2">B</th>
						<th class="col-2">C</th>
						<th class="col-3">D</th>
						<th class="col-4">E</th>
					</tr>
				</thead>
				<tbody>
					<tr class="row no-gutters border border-dark" id="filtre_tr" style="display: ;">
						<td class="col-1">a</td>
						<td class="col-2">1</td>
						<td class="col-2">11</td>
						<td class="col-3">aa</td>
						<td class="col-4">aaa</td>
					</tr>
					<tr class="row no-gutters border border-dark" id="filtre_tr" style="display: ;">
						<td class="col-1">b</td>
						<td class="col-2">2</td>
						<td class="col-2">22</td>
						<td class="col-3">bb</td>
						<td class="col-4">bbb</td>
					</tr>
					<tr class="row no-gutters border border-dark" id="filtre_tr" style="display: ;">
						<td class="col-1">c</td>
						<td class="col-2">10</td>
						<td class="col-2">20</td>
						<td class="col-3">cc</td>
						<td class="col-4">ccc</td>
					</tr>
					<tr class="row no-gutters border border-dark" id="filtre_tr" style="display: ;">
						<td class="col-1">d</td>
						<td class="col-2">2</td>
						<td class="col-2">220</td>
						<td class="col-3">dd</td>
						<td class="col-4">ddd</td>
					</tr>
				</tbody>
			</table>
		</form>
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script>
                jQuery(document).ready(function () {
                        $("#btn_filtre").click(function(){
                                var reg = new RegExp($("#filtre").val());
                                $("#filtre_tr").children("tbody").children("tr").each(function(i, item){
                                        $(item).css("display", ($(item).children('td').eq(2).text().match(reg)) ? '' : 'none');
                                });
                        });
                });
        </script>
</body>  
</html>

En saisissant 22 dans mon formulaire, je veux que ça ne m'affiche que les lignes qui commencent par cette valeur dans la colonne C, donc que les lignes b et d.

J'ai mis en dur dans mon Jquery : col(2)
Est ce bien ça qu'il faut mettre pour tester la 3e colonne ?

Merci d'avance pour votre aide !

**Toufik83** · 19/05/2020, 22h07

Bonsoir,

Envoyé par merou19

J'ai mis pour chaque ligne de ma table id="filtre_tr"

NON

, un ID doit être unique dans une page html. supprime les id des <tr> du <tbody> et mets ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$(document).ready(function () {
      $("#btn_filtre").click(function(){
           var reg = new RegExp($("#filtre").val());
           $(".table-bordered tbody tr")
           .each(function(i, item){//pour chaque <tr>
              $(item)
              .css("display", $(item)
                 .children('td:eq(2)')
                 .text().match(reg) ? '' : 'none');
            });
      });
});

Une autre solution est d'utiliser l'événement keyup sur l'input <input id="filtre" type="text" required /> au lieu du click sur le bouton :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$(document).ready(function () {
      $("#filtre").keyup(function(){
           var reg = new RegExp($("#filtre").val());
           $(".table-bordered tbody tr")
           .each(function(i, item){
              $(item)
              .css("display", $(item)
              .children('td:eq(2)')
              .text().match(reg) ? '' : 'none');
            });
      });
});

**merou19** · 20/05/2020, 10h20

YES, merci beaucoup Toufik83 !

En effet, pour l'id qui doit être unique, je suis d'accord, je me suis embrouillé à force de voir des exemples sur le web...

J'ai essayé tes 2 codes, c'est exactement ce que je voulais ! Et même avec ton 2eme code, tu as devancé ma question suivante que j'avais en tête !

Merci encore, sujet résolu !

Masquer les lignes d'une TABLE Bootstrap

jQuery

Discussions similaires

Partager

Partager