Quiero buscar una tabla por los valores en una sola columna.
La tabla se ve así:
<table class="table main-content"> <thead> <td><b>Title</b></td> <td><b>Name</b></td> <td><b>State (D)</b></td> <td><b>Party</b></td> <td><b>Room</b></td> <td><b>Phone #</b></td> <td><b>Special Role(s)</b></td> </thead> <tbody id="congress"> <tr> <td>Senator</td> <td><a href="http://www.alexander.senate.gov/">Alexander, Lamar</a></td> <td>TN</td> <td class="republican">Rep.</td> <td>455 Dirksen</td> <td>(202) 224-4944</td> <td></td> </tr> <tr> <td>Senator</td> <td><a href="http://www.barrasso.senate.gov">Barrasso, John</a></td> <td>WY</td> <td class="republican">Rep.</td> <td>307 Dirksen</td> <td>(202) 224-6441</td> <td></td> </tr> ...Quiero poder buscar en la tabla por una columna determinada, decir nombres (índice 1) o estado (índice 2). Probé jets.js pero solo permite una instancia por página, mientras que necesito al menos dos. Se prefiere JQuery, JS está bien y las bibliotecas externas están bien pero no son óptimas.
¡Salud!
Editar:
He intentado usar lo siguiente:
var $rows = $('#congress tr'); $('#stateSearch').keyup(function() { var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function() { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); });El código anterior busca en todas las columnas de la tabla. ¿Cómo puedo ajustarlo para buscar solo una columna específica? (Por índice.)
El objetivo es ocultar todos los tr que no coinciden con la consulta en la columna dada
Algo como esto
function isFound(name, state) { $("table tbody").find("tr").each (function(){ var trElem = $(this); if (($(this).find("td:eq(1) a").text() == name) && ($(this).find("td:eq(2)").text() == state)) return trElem; }) return false; }Uso:
if (tr = isFound ('Firstname Lastname', 'State')) tr.remove();o, si tiene más de un elemento, use un bucle para eliminar
while (tr = isFound ('Firstname Lastname', 'State')) tr.remove();Aquí hay un ejemplo que ocultará todas las filas donde la columna Estado (índice 3) es TN . Puedes adaptarlo como necesites:
$('td:nth-child(3)').each (function(){ if( $(this).val() == 'TN' ) $(this).parent().hide(); });Otra solución fácil sería utilizar Datatables , que tienen una función de búsqueda integrada y métodos para buscar por columna . Puede ser excesivo para su proyecto, pero eche un vistazo de todos modos para el futuro.
Podría reinventar la rueda, pero probablemente sea mejor usar DataTables a menos que tenga una necesidad expresa de hacer lo contrario:
var $table = $('table'); // Setup - add a text input to each footer cell $table.find('tfoot th').filter(':eq(1),:eq(2)').css('visibility', 'visible').each(function() { var title = $(this).text(); $(this).html('<input type="text" placeholder="Search ' + title + '" />'); }); // DataTable var table = $table.DataTable({ lengthChange: false }); // Apply the search table.columns().every(function() { var col = this; $('input', this.footer()).on('keyup change', function() { if (col.search() !== this.value) col.search(this.value).draw(); }); }); table tfoot tr th { visibility: hidden; } <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/r-2.1.1/datatables.min.css" /> <script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/r-2.1.1/datatables.min.js"></script> <table class="table table-striped main-content"> <thead> <tr> <th>Title</th> <th>Name</th> <th>State (D)</th> <th>Party</th> <th>Room</th> <th>Phone #</th> <th>Special Role(s)</th> </tr> </thead> <tfoot> <tr> <th>Title</th> <th>Name</th> <th>State (D)</th> <th>Party</th> <th>Room</th> <th>Phone #</th> <th>Special Role(s)</th> </tr> </tfoot> <tbody id="congress"> <tr> <td>Senator</td> <td><a href="http://www.alexander.senate.gov/">Alexander, Lamar</a></td> <td>TN</td> <td class="republican">Rep.</td> <td>455 Dirksen</td> <td>(202) 224-4944</td> <td></td> </tr> <tr> <td>Senator</td> <td><a href="http://www.barrasso.senate.gov">Barrasso, John</a></td> <td>WY</td> <td class="republican">Rep.</td> <td>307 Dirksen</td> <td>(202) 224-6441</td> <td></td> </tr> </tbody> </table>