Tabella filtri da <select> input usando jQuery

Question

Sto provando a filtrare una tabella da un input alfabetico <select> con jQuery.

Ho il nome e il cognome in due colonne della tabella e mi piacerebbe filtrare le righe con uno di questi.

ho impostato una selezione ingresso come così:

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

e mi piacerebbe per filtrare questa tabella:

<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> 

Come potrei fare per filtrare la tabella utilizzando jQuery?

Answer 1

Ciò funzionerà a patto di avere un solo selezionare e una tabella che è stuctured come il tuo esempio

$(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(); 
      } 
     }); 
    }); 
}); 

Answer 2

Prova questo. Se necessario, sostituire y con $ (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(); 
     } 
    }); 
}); 

Modifica

@SolutionYogi. Hai ragione. Immagino che questa riga possa essere riscritta come:

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

Mai provato.

EDIT 2

Ho provato questo. Spero sia abbastanza elegante e non ho più errori.

$('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(); 
        } 
      }); 
     }); 
}); 

Answer 3

Se l'id della tabella è sel, e la tabella è scheda, questo farà il trucco. Modifica eq (0) per modificare la colonna in cui cercare. Un valore vuoto nella casella di selezione riporterà tutti i 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(); 

Answer 4

sono arrivato fino a questo. Piuttosto simile a quello che Elzo ha trovato, ma lo limita alle prime due colonne del tavolo.

$('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(); 
        } 
       } 
      });    

     }); 
    }    
}); 

non ignora caso e presuppone che uno di selezione e gli unici TR di sulla pagina sono quelli che si desidera filtrare.

MODIFICA Aggiunta un'opzione "TUTTI" per visualizzare nuovamente le righe.

Answer 5

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

Questa è la distinzione tra maiuscole e minuscole ... cosa si sta tentando di filtrare in particolare?