Tabla de filtro de entrada <select> usando jQuery

Question

Estoy tratando de filtrar una tabla desde una entrada alfabética <select> con jQuery.

Tengo los nombres y apellidos en dos columnas de la tabla, y me gustaría filtrar las filas por cualquiera de estos.

tengo una selección de entrada configurado como así:

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

y me gustaría filtrar esta tabla:

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

¿Cómo hago para filtrar la tabla usando jQuery?

Answer 1

Esto funciona suponiendo que sólo tiene un selecto y una tabla que se Stuctured como tu ejemplo

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

Pruebe esto. Si es necesario, sustituya 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(); 
     } 
    }); 
}); 

Editar

@SolutionYogi. Tienes razón. Supongo que esta línea se puede reescribir como:

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

Nunca lo intenté.

EDITAR 2

He probado esto. Espero que sea lo suficientemente elegante también y no tenga más errores.

$('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

Si el id de la tabla es sel, y la mesa es pestaña, esto va a hacer el truco. Cambie eq (0) para cambiar la columna a mirar. Un valor vacío en el cuadro de selección volverá a mostrar todas las 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

me ocurrió esto. Muy similar a lo que se le ocurrió a Elzo, pero lo limita a las dos primeras columnas de la tabla.

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

     }); 
    }    
}); 

No ignora caso y se supone que tiene un selecto y las únicas del tr de la página son los que desea filtrar.

EDIT Se agregó una opción 'ALL' para mostrar filas nuevamente.

Answer 5

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

Esto distingue entre mayúsculas y minúsculas ... ¿en qué específicamente está intentando filtrar?