我想隐藏表格中的行,因为我选中了复选框,表格中的数据元素不正确。
:我是否也可以使用数据元素并按下拉列表排序,查看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
});
});