web-dev-qa-db-fra.com

Recherche dans un tableau HTML avec JS et jQuery


J'ai créé une table et je voulais la rendre consultable. J'ai donc cherché dans Google et jeté un coup d'œil à starckoverflow. 
Mais d’une manière ou d’une autre, les choses que j’ai trouvées, qui devraient fonctionner, ne fonctionnent pas 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>
javascriptjqueryhtmlzurb-foundation
7
Milo

J'ai mis la partie de votre code qui compte et a écrit un violon qui fonctionne

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

c'est maintenant le moteur 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 aussi utiliser http://www.datatables.net/ pour de telles choses;)

34
Cracker0dks

J'ai trouvé que la solution ci-dessus était bonne en théorie (bien que cela n'ait pas fonctionné), mais j'ai trouvé que cela fonctionnait 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 rechercher plus d'une colonne, il suffit de changer:

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

À:

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

Les chemins affichés étaient un peu lents pour ma table. 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é nom-donnée), par exemple: <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 souhaitez simplement rechercher dans une ligne un seul attribut, vous pouvez simplement ajouter l'attribut à 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();
  }
});

J'espère que cela pourra aider!

0
Jose Castellanos