How to limit table search to specific rows that contain specific text in a column

Question

I am searching in my table with a function:

//search field for table
$("#search_field").keyup(function() {
var value = this.value;

$("#menu_table").find("tr").each(function(index) {
    if (index === 0) return;
    var id = $(this).find("td").text();
    $(this).toggle(id.indexOf(value) !== -1);

});});

Fourth coulmn of data is Type ie Chicken, Kebabs etc. I want to search only in those rows whose 4th column contains ('Chicken'). It should not search in rows whose Type is 'Kebabs'. The code above is searching in all rows.

Answer 1

You can filter the rows and apply your code only to the filtered row like in:

$('#menu_table tr:gt(0)').filter(function(idx, ele) {
            return $(ele).find('td:eq(3)').text() == 'Chicken';
}).each(function(index, ele) {
    var id = $(this).find("td").text();
    $(this).toggle(id.indexOf(value) !== -1);
});

Another way to filter is based on :nth-child() Selector :

$('#menu_table tr:gt(0) td:nth-child(4)').filter(function(idx, ele) {
    return ele.textContent == 'Chicken';
}).closest('tr').each(function(index, ele) {
    var id = $(this).find("td").text();
    $(this).toggle(id.indexOf(value) !== -1);
});

 $('#menu_table tr:gt(0) td:nth-child(4)').filter(function(idx, ele) { return ele.textContent == 'Chicken'; }).closest('tr').each(function(index, ele) { var id = $(this).find("td:first").text(); var typ = $(this).find("td:eq(3)").text(); console.log('ID:' + id + ' Type: ' + typ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="menu_table"> <thead> <tr> <th class="centerText" data-field="item_id">ID</th> <th class="centerText" data-field="name">Name</th> <th class="centerText" data-field="price">Price</th> <th class="centerText" data-field="type">Type</th> <th class="centerText" data-field="image">Image</th> <th class="centerText" data-field="description">Description</th> <th class="centerText" data-field="cooking">Instructions</th> <th class="centerText" data-field="ingredients">Ingredients</th> <th class="centerText" data-field="warnings">Warnings</th> <th class="centerText" data-field="Storage">Storage</th> <th class="centerText" data-field="Size">Size</th> <th class="centerText" data-field="edit">Edit</th> <th class="centerText" data-field="delete">Delete</th> </tr> </thead> <tbody style="text-align:center;" id="menu_table_data"> <tr> <td>1</td> <td>name</td> <td>price</td> <td>type</td> <td>image</td> <td>description</td> <td>instruction</td> <td>ingredients</td> <td>warnings</td> <td>storage</td> <td>size</td> <td>edit</td> <td>delete</td> </tr> <tr> <td>2</td> <td>name</td> <td>price</td> <td>type</td> <td>image</td> <td>description</td> <td>instruction</td> <td>ingredients</td> <td>warnings</td> <td>storage</td> <td>size</td> <td>edit</td> <td>delete</td> </tr> <tr> <td>3</td> <td>name</td> <td>price</td> <td>not Chicken</td> <td>image</td> <td>description</td> <td>instruction</td> <td>ingredients</td> <td>warnings</td> <td>storage</td> <td>size</td> <td>edit</td> <td>delete</td> </tr> <tr> <td>4</td> <td>name</td> <td>price</td> <td>Chicken</td> <td>image</td> <td>description</td> <td>instruction</td> <td>ingredients</td> <td>warnings</td> <td>storage</td> <td>size</td> <td>edit</td> <td>delete</td> </tr> </tbody> </table> 

Answer 2

Use jQuery :contains(text) selector.

$("#menu_table").find("tr:contains('Chicken')").each(function(index) {
    if($(this).children('td').eq(3).text() == "Chicken"){
        /* Do something */
    }
});

Working example: https://jsfiddle.net/kvvnjmup/4/

 $('#menu_table').find('tr:contains("Chicken")').each(function(){ if($(this).children('td').eq(3).text() == "Chicken"){ alert($(this).prop('id')); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="menu_table"> <tbody><tr id="1"> <td></td> <td></td> <td></td> <td>Chicken</td> <td></td> </tr> <tr id="2"> <td></td> <td></td> <td></td> <td>Chicken</td> <td></td> </tr> <tr id="3"> <td></td> <td></td> <td></td> <td>pasta</td> <td></td> </tr> <tr id="4"> <td></td> <td></td> <td>Chicken</td> <td>pasta</td> <td></td> </tr> </tbody> </table>