如何按特定条件隐藏行

时间:2017-08-15 15:18:35

标签: javascript jquery

我有一个简单的函数,它检查行的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;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

我认为这就是你所追求的。您希望将更改事件处理程序绑定到复选框,当它发生更改时,循环遍历left_qty单元格。

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