jQuery Table Row Filtering by Column

jquery filter table rows by column value
jquery filter table rows search
javascript filter table rows example
jquery filter table rows by multiple columns
jquery search filter divs
jquery filter array
jquery filter by data attribute
filter div elements

I'm trying to filter table rows in an intelligent way (as opposed to just tons of code that get the job done eventually) but a rather dry of inspiration.

I have 5 columns in my table. At the top of each there is either a dropdown or a textbox with which the user may filter the table data (basically hide the rows that don't apply)

There are plenty of table filtering plugins for jQuery but none that work quite like this, and thats the complicated part :|

Here is a basic filter example http://jsfiddle.net/urf6P/3/

It uses the jquery selector :contains('some text') and :not(:contains('some text')) to decide if each row should be shown or hidden. This might get you going in a direction.

EDITED to include the HTML and javascript from the jsfiddle:

$(function() {    
    $('#filter1').change(function() { 
        $("#table td.col1:contains('" + $(this).val() + "')").parent().show();
        $("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide();
    });

});

Filtering Table rows using Jquery, Have a look at this jsfiddle. The idea is to filter rows with function which will loop through words. jo.filter(function (i, v) { var $t = $(this); for (var d  I doenst mean normal JQUERY filteration of the rows based on the value. I was trying to filter out the rows in the table as the DATATABLE filter or search system in Jquery datatable. The function should be the same as a the search text box in Datatable, but the search should occur in hidden field in one column only. Hope its clear now..

Slightly enhancing the accepted solution posted by Jeff Treuting, filtering capability can be extended to make it case insensitive. I take no credit for the original solution or even the enhancement. The idea of enhancement was lifted from a solution posted on a different SO post offered by Highway of Life.

Here it goes:

// Define a custom selector icontains instead of overriding the existing expression contains
// A global js asset file will be a good place to put this code
$.expr[':'].icontains = function(a, i, m) {
  return $(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

// Now perform the filtering as suggested by @jeff
$(function() {    
    $('#filter1').on('keyup', function() {  // changed 'change' event to 'keyup'. Add a delay if you prefer
        $("#table td.col1:icontains('" + $(this).val() + "')").parent().show();  // Use our new selector icontains
        $("#table td.col1:not(:icontains('" + $(this).val() + "'))").parent().hide();  // Use our new selector icontains
    });

});

How To Create a Filter/Search Table, filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); // Loop through all table rows, and hide  I need to filter out rows from a datatable that do not contain a certain value in a column. For example, with the data below, I would like to just show results where type = "Dog":

This may not be the best way to do it, and I'm not sure about the performance, but an option would be to tag each column (in each row) with an id starting with a column identifier and then a unique number like a record identifier.

For example, if you had a column Produce Name, and the record ID was 763, I would do something like the following:

​​<table id="table1">
    <thead>
        <tr>
            <th>Artist</th>
            <th>Album</th>
            <th>Genre</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="artist-127">Red Hot Chili Peppers</td>
            <td id="album-195">Californication</td>
            <td id="genre-1">Rock</td>
            <td id="price-195">$8.99</td>
        </tr>
        <tr>
            <td id="artist-59">Santana</td>
            <td id="album-198">Santana Live</td>
            <td id="genre-1">Rock</td>
            <td id="price-198">$8.99</td>
        </tr>
        <tr>
            <td id="artist-120">Pink Floyd</td>
            <td id="album-183">Dark Side Of The Moon</td>
            <td id="genre-1">Rock</td>
            <td id="price-183">$8.99</td>
        </tr>
    </tbody>
</table>

You could then use jQuery to filter based on the start of the id.

For example, if you wanted to filter by the Artist column:

var regex = /Hot/;
$('#table1').find('tbody').find('[id^=artist]').each(function() {
    if (!regex.test(this.innerHTML)) {
        this.parentNode.style.backgroundColor = '#ff0000';
    }
});

jQuery Filters, Example explained: We use jQuery to loop through each table rows to check if there are any text values that matches the value of the input field. The toggle()  Filtering Table rows using Jquery. I found a Jquery script that does the table filtering stuff based on input field. This script basically takes the filter, splits each word and filters table rows with each word. So at the end you'll have a list of rows that have all the words in the input field.

step:1 write the following in .html file

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>

step:2 write the following in .js file

function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}

Using jQuery to Filter Table Rows, //add index column with all content. $( ".filterable tr:has(td)" ).each( function  I've been using the DataTables jQuery plugin with the filter plug in, and it is awesome. However, I was wondering if it is possible to filter table columns by row using a comparison operator (e.g.

Column filtering, Column filtering. This example demonstrates FixedHeader being used with individual column filters, placed into a second row of the table's header (using $()​.clone  Searching a table row for specific text in a COLUMN with jQuery. Filter the found cells based on a function, this is testing whether the content of the cell is

How to build a simple table filter with jQuery, Example explained: We use jQuery to loop through each table rows to check if there are any text values that matches the value of the input field. The toggle  This example demonstrates FixedHeader being used with individual column filters, placed into a second row of the table's header (using $ ().clone () ). The Javascript shown below is used to initialise the table shown in this example: In addition to the above code, the following Javascript library files are loaded for use in this example:

jQuery tablesorter 2.0 - Filter Widget, The idea was to add a second row to the table header (below the column names) and have there a text input in each cell of this new row. // If your first row has less columns than rest of table you can set column count here columns: null }); This awesome jQuery plugin is developed by erikrichert . For more Advanced Usages, please check the demo page or visit the official website.

Comments
  • This is a fairly efficient way of doing it but best of all, so little code :P Thanks
  • very nice solution!
  • instead of just by ID, what if I want to search every column in every row?