Question 11225 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search