如何正确链接jquery选择器？

Question

I'm trying to implement a quick search/filter function to my table using jquery. In essence I want to hide all the rows that don't have the string I'm looking for from a searchbox to be hidden.

I have a dynamically created table and a text field used as the filter for the list.

Table:

<table id="report-table" class="table">
<thead>
    <tr>
        <th class="">client</th>
        <th class="">coach</th>
        <th class="">groups</th>

    </tr>
</thead>

<tbody>
    <tr>
        <td class="name">John</td>
        <td class="coach">Peter </td>
        <td class="groups"> Skiers </td>
    </tr>
</tbody>

Ihave a function tied to the change event of the search text box. In this function I essentially want to choose all tr that do not contain the text string in name or coach column and add a class to them. I have tried many things but have not gotten the syntax right, how should it be written?

hideSearch: function(e){

        console.log("hideSearch called");
        var searchValue = this.$el.find('.search-text').val();

        if(!searchValue ){
            console.log("hideSearch: empty search param");
            this.$el.find('tr').removeClass('hidden');
        }
        else{
            console.log("hideSearch: searched for: " + searchValue);
            //$('(#name, #groups):contains:not("'+searchValue+'")').parent().addClass('hidden');
            var selection =$('#name, #groups').('*:contains("'+searchValue+'")');

            console.log(selection);
            //console.log($('#name, #groups').('*:contains("'+searchValue+'")'));
            //$('(#name, #groups):contains("'+searchValue+'")').parent().addClass('hidden');
            //$('#name, #groups').('*:contains:not("'+searchValue+'")').parent().addClass('hidden');

        }

Answer 1

$('#name, #groups').('*:contains("'+searchValue+'")'); would basically try to access the property *:contains("foo") (assuming searchValue is "foo" ) of the object returned by $('#name, #groups') . I believe I don't have to say that jQuery objects don't have properties with such strange names.

First of all you have to give all the cells a common class instead of an ID. Then you should select all rows and see if either .name or .coach contain the search value. Use .filter to get those for which neither cell matches:

$('#report-table > tbody > tr').filter(function() {
    return $(this).children('.name').text().indexOf(searchValue) === -1 &&
           $(this).children('.coach').text().indexOf(searchValue) === -1;
}).addClass('hidden');

The filter callback returns true if neither the .name cell nor the .coach cell contain the search value. Those rows for which the callback returns true are kept in the selection and are getting the class hidden added to them.