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

时间:2013-12-30 14:08:34

标签: jquery html5

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

  • 另一个实验

:我是否也可以使用数据元素并按下拉列表排序,查看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
    });
});

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

1 个答案:

答案 0 :(得分:0)

无需重新发明轮子。如果你想要真正的表过滤/排序功能,你应该使用像SlickGridjqGrid

这样的网格库