根据复选框和数据元素隐藏/显示表格行

我想隐藏表中的行，因为我选中了复选框并且该数据元素在表中不正确。

• 另一个实验

：我还可以使用数据元素进行排序并按下拉列表排序，查看 tr 标签（价格、名称、评级）吗？

<div class="filter-list">         
<label><input type="checkbox" value="EMI"/>EMI</label>
<label><input type="checkbox" value="COD"/>COD</label>
<label><input type="checkbox" value="Return-Policy"/>Return Policy</label>
<label><input type="checkbox" value="Discount"/>Discount</label>

<select id="sortby">
<option value="price:asc">Price: Low to High</option>
<option value="price:desc">Price: High to Low</option>
<option value="rating:desc">Store Rating</option>
<option value="rating:desc">A-Z</option>
<option value="rating:desc">Z-A</option>
</select>
</div>

<table id="productsprice">
    <tbody>
        <tr data-cod="1" data-emi="0" data-returnpolicy="1" data-discount="1" data-rating="3" data-price="45000" data-name="ebay">
            <td>COD: YES</td>
            <td>EMI: No</td>
            <td>Return Policy: 30 days</td>
            <td>Price: 45000</td>
            <td>Discount : 300</td>
        </tr>
 <tr data-cod="1" data-emi="0" data-returnpolicy="1" data-discount="1" data-rating="3" data-price="45000" data-name="sears">
            <td>COD: YES</td>
            <td>EMI: No</td>
            <td>Return Policy: 30 days</td>
            <td>Price: 42000</td>
            <td>Discount : 300</td>
        </tr>
 <tr data-cod="0" data-emi="1" data-returnpolicy="" data-discount="0" data-rating="4" data-price="48000" data-name="walmart">
            <td>COD: NO</td>
            <td>EMI: YES</td>
            <td>Return Policy: 30 days</td>
            <td>Price: 48000</td>
            <td>Discount : Not Available</td>
        </tr>
 <tr data-cod="1" data-emi="1" data-returnpolicy="1" data-discount="0" data-rating="5" data-price="45000.50" data-name="amazon">
            <td>COD: YES</td>
            <td>EMI: YES</td>
            <td>Return Policy: 30 days</td>
            <td>Price: 45000.50</td>
            <td>Discount : Not Avaialable</td>
        </tr>       
    </tbody>
</table>

Jquery

$(".filter-list").change(function(){
    $("#productsprice").children('tbody').children('tr').each(function(){
        var match = false;
        $(this).attr('data-cod').each(function() {
            if($(this).text() == $(".filter-list").val()) match = true;
        });

 // if data tag in <tr> found as not 1(true). toggle the hidden class to that rows and so on for each rows
    });
});

Fiddle : http://jsfiddle.net/9TTPS/9/ http://jsfiddle.net/9TTPS/9/

无需重新发明轮子。如果您想要真正的表过滤/排序功能，您应该使用网格库，例如光滑网格 https://github.com/mleibman/SlickGrid or jqGrid http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3achange#jqgrid_4.5.4_changes_and_fixes