Recherche tableau HTML avec JS et jQuery

J'ai fait un tableau et je voulais faire l'objet de recherches, j'ai donc cherché et cherché ici à starckoverflow.

Mais de toute façon, les choses que j'ai trouvé, cela devrait fonctionner, il ne faut pas travailler pour moi?

Voici le code HTML et JS.

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="C.Palma" />
<meta name="content" content="World of Warcraft. Characters. Project. Learn 2 Code." />
<title>World of Warcraft Characters.</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/modernizr.js"></script>
<script type="text/javascript">
//When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
$(document).ready(function(){
//Write on keyup event of keyword input element
$("search").keyup(function(){
//When value of the input is not blank
if( $(this).val() != "")
{
//Show only matching TR, hide rest of them
$("#table tbody tr").hide();
$("#table td:contains-ci('" + $(this).val() + "')").parent("tr").show();
}
else
{
//When there is no input or clean again, show everything back
$("#table tbody tr").show();
}
});
});
//jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
"contains-ci": function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
</script>
</head>
<body>
<div class="row large-centered">
<h1>World of Warcraft characters. <small>Mine and my brothers, we share.</small></h1>
</div>
<div class="row large-centered">
<input type="text" id="search" placeholder="Type to search..." />
<table id="table" width="100%">
<thead>
<tr>
<th>Character name</th>
<th>Class</th>
<th>Realm</th>
</tr>
</thead>
<tbody>
<tr>
<td>Benjamin.</td>
<td>Rogue.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Cachoito.</td>
<td>Hunter.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Contemplario.</td>
<td>Paladin.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Elthron.</td>
<td>Death Knight.</td>
<td>Agamaggan ES.</td>
</tr>
<tr>
<td>Giloh.</td>
<td>Priest.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Kitialamok.</td>
<td>Warrior.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Magustroll.</td>
<td>Mage.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Marselus.</td>
<td>Mage.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Mistrala.</td>
<td>Warrior.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Suavemente.</td>
<td>Warrior.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Tittus.</td>
<td>Monk.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Yarlokk.</td>
<td>Warlock.</td>
<td>Uldum ES.</td>
</tr>
</tbody>
</table>
</div>
<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>

Qu'est-ce exactement ne fonctionne pas?
Pour une chose, $("search").keyup(...) devrait être $("#search").keyup(...).
$("search").keyup(function(){ remplacer par $("#search")

OriginalL'auteur Milo | 2013-12-13

34

J'ai mis de la partie de votre code, et a écrit un travail de violon

http://jsfiddle.net/9hGym/602/

maintenant, c'est l'engin de recherche:
```
    var searchText = $(this).val().toLowerCase();
$.each($("#table tbody tr"), function() {
if($(this).text().toLowerCase().indexOf(searchText) === -1)
$(this).hide();
else
$(this).show();                
});
```
vous pouvez également utiliser http://www.datatables.net/ pour de telles choses 😉

excellente solution!
Super! u m'a sauvé la vie 🙂 merci @Cracker0dks
excellente solution 😀

OriginalL'auteur Cracker0dks

J'ai trouvé que la solution ci-dessus est bien en théorie (même si cela n'a pas fonctionné), mais j'ai trouvé que cela fonctionne mieux:

$('#search-field').on('keyup', function(e) {
if ('' != this.value) {
var reg = new RegExp(this.value, 'i'); //case-insesitive
$('.table tbody').find('tr').each(function() {
var $me = $(this);
if (!$me.children('td:first').text().match(reg)) {
$me.hide();
} else {
$me.show();
}
});
} else {
$('.table tbody').find('tr').show();
}
});

Si vous voulez la recherche de plus d'une colonne, il suffit de changer:

if (!$me.children('td:first').text().match(reg)) {

if (!$me.children('td').text().match(reg)) {

OriginalL'auteur Yes Barry

Les moyens affichés étaient un peu lent à mon tableau. Je suis venu avec une solution différente qui semble être beaucoup plus rapide.

Si vous voulez rechercher dans chaque cellule, vous pouvez ajouter un attribut à la cellule (j'ai utilisé des données-nom), ex:<td data-name="john smith">John Smith</td>. Ensuite, vous pouvez utiliser ce code javascript:

$("#search").keyup(function() {
var val = this.value.trim().toLowerCase();
if ('' != val) {
var split = val.split(/\s+/);
var selector = 'td';
for(var i=0;i<split.length;i++){
selector = selector+'[data-name*='+split[i]+']';
}
$('tr').hide();
$(selector).closest('tr').show();
} else {
$('tr').show();
}
});

Si vous voulez juste pour rechercher une lignes pour un seul attribut, vous pouvez juste ajouter l'attribut de la ligne comme <tr data-name="john smith"><td>John Smith</td><td>...</td></tr> et utiliser les éléments suivants:

$("#search").keyup(function() {
var val = this.value.trim().toLowerCase();
if ('' != val) {
var split = val.split(/\s+/);
var selector = 'tr';
for(var i=0;i<split.length;i++){
selector = selector+'[data-name*='+split[i]+']';
}
$('tr').hide();
$(selector).show();
} else {
$('tr').show();
}
});

Espère que ça aide!

OriginalL'auteur Jose Castellanos

-1

Vous pouvez utiliser ce code. Il est de travail excellentes.

$('#search').keydown(function () {
var searchitem = $('#search').val();
if (searchitem == '' || searchitem == null || searchitem == undefined)           {
$('#table tbody tr').show();
}
else {
searchitem = searchitem.toUpperCase();
$('#table tbody tr').hide();
$('#table tbody tr').each(function () {
if ($(this).text().indexOf(searchitem) > -1) {
$(this).show();
}
});
}
});

OriginalL'auteur Developer

Vous devez vous connecter pour publier un commentaire.