Filtre de table à partir de <select> entrée à l'aide de jQuery

Je suis en train de filtrer une table à partir d'une alphabétique <select> entrée avec jQuery.

J'ai des noms et des prénoms dans les deux colonnes de la table, et j'aimerais filtrer les lignes par un de ces.

J'ai un select input mis en place en tant que:

<select>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    ...
</select>

et j'aimerais filtre de ce tableau:

<tr>
    <td>Joe</td>
    <td>Schmoe</td>
    <td>$2482.79</td>
    <td>172.78.200.124</td>
    <td>http://gmail.com</td>
</tr>
<tr>
    <td>John</td>
    <td>Doe</td>
    <td>$2776.09</td>
    <td>119.232.182.142</td>
    <td>http://www.example.com</td>
</tr>

Comment pourrais-je aller sur le filtrage de la table à l'aide de jQuery?

filtre par leur prénom?

OriginalL'auteur peehskcalba | 2009-07-08

  1. 6

    Cela fonctionne en supposant que vous avez seulement une de sélectionner et d'une table qui est stuctured comme votre exemple

    $(document).ready(function($) {
    var rows = $('table tr').each(function() {
        var row = $(this);
        var columns = row.children('td');

        row.data('name-chars', [
            columns.eq(0).html()[0].toUpperCase(),
            columns.eq(1).html()[0].toUpperCase(),
        ]);
    });

    $('select').change(function() {
        var char = $(this).val().toUpperCase();

        rows.each(function() {
            var row = $(this);
            var chars_to_match = row.data('name-chars');
            if($.inArray(char, chars_to_match) > -1) {
                row.show();
            }
            else {
                row.hide();
            }
        });
    });
});
    Excellent! Maintenant, comment pourrais-je inclure une <option> pour afficher toutes les lignes?
    Ajouter de la première option "Tous" et dans la fonction de changement si la valeur est 'All', faire $('table tr').show() et vous avez terminé.
    Pourquoi êtes-vous stocker les deux premiers caractères à l'aide de données de la méthode pour chaque ligne? Si vous allez parcourir toutes les lignes, vous pourriez aussi bien obtenir ce deux premiers caractères sur demande.
    génial fonction, utilisé pour mes scripts!

    OriginalL'auteur howardr

  2. 2

    Je suis venu avec cette. Assez similaire à ce qu'Elzo est venu avec, mais il la limite pour les deux premières colonnes de la table.

     $('select').change( function(e) { 
   var letter = $(this).val();
     if (letter === 'ALL') {
         $ ('tr').show ();
     }
     else {
         $('tr').each( function(rowIdx,tr) {
             $(this).hide().find('td').each( function(idx, td) {
                 if( idx === 0 || idx === 1) {
                     var check = $(this).text();
                     if (check && check.indexOf(letter) == 0) {
                         $(tr).show();
                     }
                 }
             });             

         });
     }             
 });

    Elle ne l'ignore pas le cas et suppose que vous avez un select et le seul tr sur la page sont ceux que vous souhaitez filtrer.

    MODIFIER Ajouté un "TOUT" option pour afficher les lignes de nouveau.

    OriginalL'auteur seth

  3. 0

    Si l'id de votre table est sel, et la table est onglet, cela fera l'affaire. Changement eq(0) de changer la colonne de regarder dans. Une valeur vide dans la boîte de sélection sera ré-afficher tous trs.

    var selSelection = $("#sel").val();
if(!selSelection) $("#tab tr").show();
else $("#tab tr").show().filter(function(index){
    return $("td:eq(0)", this).html().indexOf(selSelection) == -1;
}).hide();

    OriginalL'auteur AKX

  4. 0

    $("td:not(:contains('" + input_value + "'))").remove();

    Ce est sensible à la casse ... qu'est-ce qui vous tente du filtre?

    OriginalL'auteur webwires

  5. 0

    De l'essayer. Si nécessaire, remplacer y par $(y).

    $('tr').hide();
$('select').change( function(){
    var letter = $(this).val();
    var dataset = $('#tableID').find('td');
    $.each(dataset, function(x, y){
        if( y.substr(0,1) == letter){
            y.parent().show();
        }
    });
});

    Modifier

    @SolutionYogi. Vous êtes de droite. Je suppose que cette ligne peut être rewriten:

    var dataset = $('#tableID').find('tr').children('td').slice(0,1);

    Jamais essayé.

    EDIT 2

    J'ai testé cette. J'espère, c'est élégant, assez bien et je n'ai pas d'autres erreurs.

    $('tr').hide();
$('select').change( function(){
    var letter = $(this).val();
    var dataset = $('#tableID').find('tr');
        $.each(dataset, function(x, y){
            var data = $(y).children().slice(0,2);
                $.each(data, function(a, b){
                    if( $(b).html().substr(0,2) == letter){
                        $(b).parent().show();
                    }
             });
       });
});
    Votre recherche de code toutes les colonnes, tandis que l'auteur veut de ne rechercher que les deux premières colonnes.
    Ne sera pas que le code de rechercher seulement les deux premières cellules de la première ligne?
    Vous êtes de nouveau à droite. Je vais essayer de trouver une autre solution afin de ne pas analyser l'ensemble de la td jeu.
    Auteur veut de recherche des deux premières lettres où, comme vous correspond à un seul caractère.
    J'ai modifié à substr(0,2). Ce code est plus comme un concept pour résoudre un problème, alors l'écriture de code pour les gens. Les gens doivent être en mesure de changer, de comprendre et d'adapter le code que nous présentons ici, sinon, le résultat est futile. Vrai?

    OriginalL'auteur Elzo Valugi