Alen Alen -3 years ago 61
Javascript Question

How to hide rows by specific condition

I have a simple function that I made which checks the

left
quantity of a row and if it is zero then hide it if the checkbox is checked. But it doesn't work, I tried to use
.change
function but it seems to be not working.

Can anyone please check what is wrong?



$("#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>




Answer Source

I think this is what you're after. You want to bind a change event handler to your checkbox and when it changes, loop through the left_qty cells.

$("#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()
      }
    })
});
<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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download