我有一个简单的函数,它检查行的left
数量,如果它是零,则在选中复选框时隐藏它。但它不起作用,我试图使用.change
函数,但它似乎无效。
有人可以检查一下是什么问题吗?
$("#get_zero").prop('checked')
{
var td = $(".left_qty");
if(td.text() == 0)
{
$(td).parent().hide();
}
}
$("#get_zero").change(function(e)
{
var td = $(".left_qty");
if($(this).prop('checked'))
{
if(td.text() == 0)
{
$(td).parent().hide();
}
}
else
{
$(td).parent().show();
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
<input type="checkbox" class="filled-in get_zero" id="get_zero" checked="checked" />
<label for="get_zero">Show 0 Quantity Products</label>
</p>
<table class="table table-hover" id="products_table" style="border: 1px solid #000;">
<tr style="color: #333333;">
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Name</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Category</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Nick</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Color</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Model</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">QtyIN</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">QtyOUT</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Left</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Cost</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Total</th>
<th style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Edit/Update</th>
<th style="text-align: center;border-bottom: 1px solid #000;border-top:1px solid #000;">Delete</th>
</tr>
<tr class="product_rows" id="tr_4">
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/4/full">crown cooking rang 27m black body</a></td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cooking rang</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cr</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">black</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">27m</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">18</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">16</td>
<td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">2</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">13,500.00</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">27,000.00</td>
<td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
<a class="fa fa-edit fa-lg" href="/products/edit/4"></a>
</td>
<td style="text-align: center;border-bottom: 1px solid #000;">
<a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_4" id="del_4"></a>
</td>
</tr>
<tr class="product_rows" id="tr_5">
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/5/full">canon cooking rang c28 steel body</a></td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cooking rang</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cr2</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">steel</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">c28</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">20</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">11</td>
<td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">9</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">15,000.00</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">135,000.00</td>
<td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
<a class="fa fa-edit fa-lg" href="/products/edit/5"></a>
</td>
<td style="text-align: center;border-bottom: 1px solid #000;">
<a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_5" id="del_5"></a>
</td>
</tr>
<tr class="product_rows" id="tr_6">
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">
<a target="_blank" href="/report/stock/6/full">stone gas billton oven 22x22</a>
</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">billton oven</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">bo</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">steel</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">22x22</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">6</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">6</td>
<td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">0</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">8,500.00</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">0.00</td>
<td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
<a class="fa fa-edit fa-lg" href="/products/edit/6"></a>
</td>
<td style="text-align: center;border-bottom: 1px solid #000;">
<a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_6" id="del_6"></a>
</td>
</tr>
<tr class="product_rows" id="tr_7">
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/7/full">Juicer Hit</a></td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">Juicer</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">j1</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">white</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">j1</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">300</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">24</td>
<td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">276</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">1,200.00</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">331,200.00</td>
<td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
<a class="fa fa-edit fa-lg" href="/products/edit/7"></a>
</td>
<td style="text-align: center;border-bottom: 1px solid #000;">
<a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_7" id="del_7"></a>
</td>
</tr>
</table>
&#13;
答案 0 :(得分:1)
我认为这就是你所追求的。您希望将更改事件处理程序绑定到复选框,当它发生更改时,循环遍历left_qty
单元格。
$("#get_zero").change(function(e) {
$('td.left_qty').each(function() {
if ($(this).text() == 0 && !$("#get_zero").is(':checked')) {
$(this).parent().hide()
} else {
$(this).parent().show()
}
})
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
<input type="checkbox" class="filled-in get_zero" id="get_zero" checked="checked" />
<label for="get_zero">Show 0 Quantity Products</label>
</p>
<table class="table table-hover" id="products_table" style="border: 1px solid #000;">
<tr style="color: #333333;">
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Name</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Category</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Nick</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Color</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Model</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">QtyIN</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">QtyOUT</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Left</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Cost</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Total</th>
<th style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Edit/Update</th>
<th style="text-align: center;border-bottom: 1px solid #000;border-top:1px solid #000;">Delete</th>
</tr>
<tr class="product_rows" id="tr_4">
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/4/full">crown cooking rang 27m black body</a></td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cooking rang</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cr</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">black</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">27m</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">18</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">16</td>
<td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">2</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">13,500.00</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">27,000.00</td>
<td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
<a class="fa fa-edit fa-lg" href="/products/edit/4"></a>
</td>
<td style="text-align: center;border-bottom: 1px solid #000;">
<a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_4" id="del_4"></a>
</td>
</tr>
<tr class="product_rows" id="tr_5">
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/5/full">canon cooking rang c28 steel body</a></td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cooking rang</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cr2</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">steel</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">c28</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">20</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">11</td>
<td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">9</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">15,000.00</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">135,000.00</td>
<td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
<a class="fa fa-edit fa-lg" href="/products/edit/5"></a>
</td>
<td style="text-align: center;border-bottom: 1px solid #000;">
<a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_5" id="del_5"></a>
</td>
</tr>
<tr class="product_rows" id="tr_6">
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/6/full">stone gas billton oven 22x22</a></td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">billton oven</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">bo</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">steel</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">22x22</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">6</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">6</td>
<td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">0</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">8,500.00</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">0.00</td>
<td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
<a class="fa fa-edit fa-lg" href="/products/edit/6"></a>
</td>
<td style="text-align: center;border-bottom: 1px solid #000;">
<a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_6" id="del_6"></a>
</td>
</tr>
<tr class="product_rows" id="tr_7">
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/7/full">Juicer Hit</a></td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">Juicer</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">j1</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">white</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">j1</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">300</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">24</td>
<td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">276</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">1,200.00</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">331,200.00</td>
<td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
<a class="fa fa-edit fa-lg" href="/products/edit/7"></a>
</td>
<td style="text-align: center;border-bottom: 1px solid #000;">
<a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_7" id="del_7"></a>
</td>
</tr>
</table>
&#13;
答案 1 :(得分:1)
您需要在更改事件回调中测试已检查状态。此外,您需要迭代要检查的单元格,并检查每个单元格。
您还应该在页面加载时调用处理程序,以便初始可视化也与复选框一致。最后,您可以使用$("#get_zero").change(function(e) {
var show = $(this).is(':checked');
$(".left_qty").each(function () { // Iterate over cells
$(this).parent().toggle(show || $(this).text() != 0);
});
}).change(); // trigger on page load also
来显示/隐藏:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
<input type="checkbox" class="filled-in get_zero" id="get_zero" checked="checked" />
<label for="get_zero">Show 0 Quantity Products</label>
</p>
<table class="table table-hover" id="products_table" style="border: 1px solid #000;">
<tr style="color: #333333;">
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Name</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Category</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Nick</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Color</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Model</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">QtyIN</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">QtyOUT</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Left</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Cost</th>
<th style="border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Total</th>
<th style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;border-top:1px solid #000;">Edit/Update</th>
<th style="text-align: center;border-bottom: 1px solid #000;border-top:1px solid #000;">Delete</th>
</tr>
<tr class="product_rows" id="tr_4">
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/4/full">crown</a></td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cooking rang</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cr</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">black</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">27m</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">18</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">16</td>
<td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">2</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">13,500.00</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">27,000.00</td>
<td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
<a class="fa fa-edit fa-lg" href="/products/edit/4"></a>
</td>
<td style="text-align: center;border-bottom: 1px solid #000;">
<a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_4" id="del_4"></a>
</td>
</tr>
<tr class="product_rows" id="tr_5">
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/5/full">canon</a></td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cooking rang</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">cr2</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">steel</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">c28</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">20</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">11</td>
<td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">9</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">15,000.00</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">135,000.00</td>
<td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
<a class="fa fa-edit fa-lg" href="/products/edit/5"></a>
</td>
<td style="text-align: center;border-bottom: 1px solid #000;">
<a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_5" id="del_5"></a>
</td>
</tr>
<tr class="product_rows" id="tr_6">
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/6/full">stone</a></td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">billton oven</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">bo</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">steel</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">22x22</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">6</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">6</td>
<td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">0</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">8,500.00</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">0.00</td>
<td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
<a class="fa fa-edit fa-lg" href="/products/edit/6"></a>
</td>
<td style="text-align: center;border-bottom: 1px solid #000;">
<a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_6" id="del_6"></a>
</td>
</tr>
<tr class="product_rows" id="tr_7">
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;"><a target="_blank" href="/report/stock/7/full">Juicer</a></td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">Juicer</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">j1</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">white</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">j1</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">300</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">24</td>
<td class="left_qty" style="border-right: 1px solid #000;border-bottom: 1px solid #000;">276</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">1,200.00</td>
<td style="border-right: 1px solid #000;border-bottom: 1px solid #000;">331,200.00</td>
<td style="text-align: center; border-right: 1px solid #000;border-bottom: 1px solid #000;">
<a class="fa fa-edit fa-lg" href="/products/edit/7"></a>
</td>
<td style="text-align: center;border-bottom: 1px solid #000;">
<a class="fa fa-trash-o fa-lg delete_item" data-toggle="collapse" data-target="#form_del_7" id="del_7"></a>
</td>
</tr>
</table>
count()