隐藏具有 tds 匹配条件的表行

Question

我有这个 html 表格：

我想用 jquery 隐藏所有匹配某些值的行，并像这样创建两种过滤器。

第一个过滤器应该检查第一列上的选定文本，如果是 V，则隐藏所有行。

第二个应该像这样检查另外两个列： CosmicId!=null && Coverage>400 将来我可能还需要一个三列过滤器。

尝试了一些 jquery 选择器，但无法正确选择。

可能需要注意的是，我稍后会应用 jquery 表插件

提前致谢

Answer 1

像这样？ http://jsfiddle.net/swm53ran/178/

$(document).ready(function() {
    $('.filter1').on('click', function() {
        $('table tr').show();
        $('table tr').each(function() {
            if ($(this).find('select').val() == 'V') { // if V is selected, hide
                $(this).hide();
            }
        });
    });
    $('.filter2').on('click', function() {
        $('table tr').show();
        $('table tr').each(function() {
            if ($(this).find('.cosmicId').text() != 'null' && parseInt($(this).find('.coverage').text()) > 400) { // if cosmicId != null and coverage > 400, hide
                $(this).hide();
            }
        });
    });
    $('.reset').on('click', function() {
        $('table tr').show();
    });
});


<a href="#" class="filter1">V filter</a>
<br/>
<a href="#" class="filter2">cosmicId and coverage filter</a>
<br/>
<a href="#" class="reset">reset</a>
<br/><br/>
<table>
    <tr>
        <td>
            <select>
                <option value="0">Not V</option>
                <option value="V">V</option>
            </select>
        </td>
        <td class="cosmicId">something else</td>
        <td class="coverage">1000</td>
    </tr>
    <tr>
        <td>
            <select>
                <option value="0">Not V</option>
                <option value="V">V</option>
            </select>
        </td>
        <td class="cosmicId">something else</td>
        <td class="coverage">200</td>
    </tr>
    <tr>
        <td>
            <select>
                <option value="0">Not V</option>
                <option value="V">V</option>
            </select>
        </td>
        <td class="cosmicId">null</td>
        <td class="coverage">900</td>
    </tr>
    <tr>
        <td>
            <select>
                <option value="0">Not V</option>
                <option value="V">V</option>
            </select>
        </td>
        <td class="cosmicId">
            null
        </td>
        <td class="coverage">
            100
        </td>
    </tr>
</table>