CODEWITHSUNDEEP
jquery
Jabbamonkey
Jabbamonkey

Reputation: 277

jquery code to filter out table rows if column contains word

I have some code that takes a search query (using jquery), and uses that query to filter out rows in a table. So, if I type “leather” … it looks for rows that contain “leather” and hides rows that do not contain the word. The problem that I have, is that I only want to search the first column (but it searches every column in the row). Here is a codepen of the current code

https://codepen.io/jabbamonkey/pen/yLxBOJR

(the row containing “hide” should not appear when I search for “leather” … but it does because of "leather"worker is in column 5 …)

and here is the jquery code:

$(document).ready(function(){
        $('.search').on('keyup',function(){
            var searchTerm = $(this).val().toLowerCase();
            $('#craftTbl div.contentrow').each(function(){
                var lineStr = $(this).text().toLowerCase();
                if(lineStr.indexOf(searchTerm) === -1){
                    $(this).hide();
                    $(".descexpand").hide();
                    $(".rowCat").hide();
                    $(".rowSec").hide();
                }else{
                    $(this).show();
                }
            });
        });
    });

I cant seem to get the jquery code to search only “col1” and hide the ENTIRE row when the search query is missing from that row. I do not know javascript well (at all), so any help and guidance is appreciated ...

Note: .rowCat and .rowSec and descexpand refer to entire rows that are hidden from the search completely (and aren't shown in the codepen). These work fine.

Upvotes: 0

Views: 79

Answers (2)

76484
76484

Reputation: 8993

I think you could simply edit the lineStr assignment to get the value from the .col1 element only:

var lineStr = $(this).find('.col1').text().toLowerCase();

Here is a fork of your CodePen as an example.

Upvotes: 1

user2314737
user2314737

Reputation: 29307

For each line, you could search in the first child of $this by substituting

var lineStr = $(this).text().toLowerCase();

with

var lineStr = $(this).children(":first").text().toLowerCase();

Upvotes: 0

Related Questions