Masquer les lignes d'une TABLE Bootstrap
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:
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 !
