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

Question

我有这个 html table:

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

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

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

尝试了一些 jquery select 或无法正确 select。

可能要提到的一件事是我稍后应用 jquery tables 插件

提前致谢

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>

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

hide table rows with tds matching conditions

jquery

html-table

jquery-datatables