根据复选框和数据元素隐藏/显示表行 [英] Hide/Show table rows based on checkbox and data element

问题描述

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

I want to hide the rows in my table, as i checked on check box and that data element is not true in the table.

• 另一个实验

：我是否也可以通过使用数据元素并按下拉列表排序，查看tr标签（价格，名称，评级）？

: Can i also do the order by using the data element and sort by drop down list, look on tr tags(price, name, rating) ?

<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
    });
});

小提琴： http://jsfiddle.net/9TTPS/9/

推荐答案

无需重新发明轮子。如果你想要真正的表过滤/排序功能，你应该使用一个网格库，如 SlickGrid 或 jqGrid

No need to reinvent the wheel. If you want true table filter/sort functionality you should use a grid library like SlickGrid or jqGrid

这篇关于根据复选框和数据元素隐藏/显示表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！