peehskcalba peehskcalba - 2 months ago 15
jQuery Question

Filter table from <select> input using jQuery

I'm trying to filter a table from an alphabetical

<select>
input with jQuery.

I have first and last names in two columns of the table, and I'd like to filter the rows by either of these.

I have a select input set up as so:

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


and I'd like to filter this table:

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


How would I go about filtering the table using jQuery?

Answer

This will work assuming you only have one select and one table that is stuctured like your example

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