JQuery Filter table by column

by Alvin Olavarrieta

HTML

<input type="text" id="name" class="search-key" placeholder="name">
        <input type="text" id="lastname" class="search-key" placeholder="lastname">
        <input type="number" id="number" class="search-key" placeholder="number">
        <p></p>
        <table id="MI6">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th> 
                <th>Number</th>
            </tr>
            <tr>
                <td data-input="name">James</td>
                <td data-input="lastname">Bond</td> 
                <td data-input="number">7</td>
            </tr>
            <tr>
                <td data-input="name">Vesper</td>
                <td data-input="lastname">Lynd</td> 
                <td data-input="number">6</td>
            </tr>
            <tr>
                <td data-input="name">Rene</td>
                <td data-input="lastname">Mathis</td> 
                <td data-input="number">5</td>
            </tr>
    </table>

JavaScript

var $filterableRows = $('#MI6').find('tr').not(':first'),
		$inputs = $('.search-key');

$inputs.on('input', function() {

	$filterableRows.hide().filter(function() {
  	return $(this).find('td').filter(function() {
    	
      var tdText = $(this).text().toLowerCase(),
      		inputValue = $('#' + $(this).data('input')).val().toLowerCase();
    
    	return tdText.indexOf(inputValue) != -1;
    
    }).length == $(this).find('td').length;
  }).show();

});