使用匹配条件的tds隐藏表行

Question

我有这个html表：

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

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

sceond应检查另外两个像这样的列： CosmicId！= null＆amp;＆amp;覆盖＆GT; 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>