Filtre de Ligne de Tableau en Html

J'ai créé une page html qui contient un moteur de recherche texte et un tableau ci-dessous avec quelques données dans la table.

J'ai utilisé le code disponible sur JSFiddle.

Mais cela n'a pas fonctionné. S'il vous plaît suggérer quelque chose comme l'exemple le montre.

Je suis à l'aide d'un simple code html, CSS et Javascript de codage.

Dans cette 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 puisque c'est une application hybride?

Je suis en utilisant 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>
Cela a fonctionné pour mon cas d'utilisation: codepen.io/chriscoyier/stylo/tIuBL

OriginalL'auteur Yatin | 2014-02-04

  1. 9

    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écuter le code,

    jQuery est déjà fixé, dans le cas des OP fiddle démo
    Ça fonctionne ... mais s'il vous plaît vérifier mon code alsoo
    Veuillez mettre à jour le violon qui sera la meilleure façon de répondre..
    y compris Jquery avant le corps de balise permet d'augmenter les performances . Et dans le violon, c'est d'inclure à l'extérieur.
    Nice. Juste ce dont j'avais besoin. Merci!

    OriginalL'auteur Karthikeyan

  2. 6

    Le code JavaScript doit être interprété d'après le DOM est prêt.

    Depuis que vous utilisez le script dans le <head> section, #table tr éléments ne sont pas encore prêts; d'Où le jQuery est impossible de sélectionner les éléments.

    Vous pouvez utiliser .prêt() méthode pour vérifier si la 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 mettre votre <script>...</script> étiquette au bas, à droite avant </body> balise de fin.

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

    Cette solution fonctionne comme une merveille. Merci @Hachem

    OriginalL'auteur Hashem Qolami