Javascript Girl
  1. Javascript Girl
  3. Filtre de table de filtrage en Html
Intereting Posts
Existe-t-il des bibliothèques Parsing Expression Grammar (PEG) pour Javascript ou PHP? Réactiver le gestionnaire d'événements JS onClick Recréant les fonctionnalités ajaxStart et ajaxComplete de jQuery Le mode strict est-il plus performant? Nodejs – faire en sorte que la socket du client réessaye après 5 secondes de délai Comment injecter Javascript dans le contrôle WP7 WebBrowser? JavaScript pour contrôler l'animation d'image? La bibliothèque JavaScript est chargée deux fois dans Rails Firebase se connecte parfois, parfois ne se connecte pas (React Native) Dois-je utiliser le compresseur YUI ou le nouveau compilateur Google Closure pour compresser mon JavaScript? Javascript Submit is not Sending POST to php file Comment vérifier si un élément est sélectionné dans une liste déroulante HTML? Comment cacher la barre d'adresse dans Firefox en utilisant javascript window.open Comment définissez-vous l'entrée de fichier à rien avec JavaScript ou HTML? Comment utiliser moment-timezone dans Angular2 via SystemJs

Filtre de table de filtrage en Html

J'ai créé une page html qui a un texte de recherche et un tableau ci-dessous avec quelques données sur le tableau

J'ai utilisé le code disponible sur JSFiddle

Mais cela n'a pas marché. Veuillez suggérer quelque chose comme l'illustre l'exemple

J'utilise un simple codage html, css et javascript

Dans ce jquery est utilisé: 

var $rows = $('#table td'); $('#search').keyup(function() { var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function() { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); });

Puis-je avoir quelque chose de plus simple car il s'agit d'une application hybride?

J'utilise le code suivant. Veuillez vérifier 

 <!DOCTYPE html> <html> <head> <title>Search Box Example 2 - default placeholder text gets cleared on click</title> <link rel="stylesheet" href="css/SalesTable.css"> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW" /> <!-- JAVASCRIPT to clear search text when the field is clicked --> <script src="http://code.jquery.com/jquery-2.1.0.js"></script> <script type="text/javascript"> var $rows = $('#table tr'); $('#tfq').keyup(function() { var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function() { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); }); </script> <!-- CSS styles for standard search box with placeholder text--> </head> <body> <!-- HTML for SEARCH BAR --> <div id="tfheader"> <form id="tfnewsearch" method="get" action="http://www.google.com"> <input type="text" id="tfq" class="tftextinput2" name="q" size="21" maxlength="120" placeholder="Type to search"><input type="button" value="Search" class="tfbutton2"> </form> <div class="tfclear"></div> </div> <br> <br> <div id="tableSalesOrder"> <table id="table"> <tr> <th> A </th> <th> B </th> <th> C </th> <th> D </th> </tr> <script language="javascript"> <!-- for(i =0 ;i<4 ; i++) { document.write('<tr>'); document.write('<td>12345</td>') document.write('<td>34566</td>') document.write('<td>345356</td>') document.write('<td>Tyjhue</td>') document.write('<td><form id="approveForm"><input type = "submit" value="ButtonA"></form></td>') document.write('<td><form id="rejectForm"><input type = "submit" value="ButtonB"></form></td>') document.write('<td><form id="detailForm"><input type = "submit" value="ButtonC"></form></td>') document.write('</tr>') } //--> </script> </table> </div> </body> </html>

Inclure Jquery 

  <head> <style type="text/css"> body {padding: 20px;} input {margin-bottom: 5px; padding: 2px 3px; width: 209px;} td {padding: 4px; border: 1px #CCC solid; width: 100px;} </style> </head> <body> <input type="text" id="search" placeholder="Type to search"> <table id="table"> <tr> <td>Apple</td> <td>Green</td> </tr> <tr> <td>Grapes</td> <td>Green</td> </tr> <tr> <td>Orange</td> <td>Orange</td> </tr> </table> <script src="http://code.jquery.com/jquery-2.1.0.js"></script> <script type="text/javascript"> var $rows = $('#table tr'); $('#search').keyup(function() { var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function() { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); }); </script> </body>

Exécutez le code,

Le code JavaScript doit être interprété après que le DOM soit prêt.

Puisque vous utilisez le script dans la section <head> , les éléments #table tr ne sont pas encore prêts; Par conséquent, jQuery ne peut pas sélectionner les éléments.

Vous pouvez utiliser la méthode .ready() pour vérifier si le document est prêt: 

 $(document).ready(function() { var $rows = $('#table tr'); $('#search').keyup(function() { var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function() { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); }); });

Ou placez votre <script>...</script> en bas, juste avant </body> tag d'extrémité.

Plus d'informations: http://learn.jquery.com/using-jquery-core/document-ready/