jQuery-根据选择下拉列表值重新排列表行

Kelly SD 发表于 Dev

凯利SD

我有一个选择下拉列表和一个表。我想做的是，当我们从下拉菜单中选择时，将显示一个计数，以让我们知道表中有多少项（已完成），并通过带来查询的/相关的信息来重新排列行行到顶部。在示例中，如果从下拉列表中选择了“软件”，则我希望所有带“软件”的行都显示在顶部。感谢帮助！

这是我到目前为止的东西-jQuery 1.7.2
https://jsfiddle.net/hv0wfds4/12/

这是代码：JS：

function filterProduct(){
  $product_dd = $('#product_select').val();
  if($product_dd =="All"){
    $('#count_co_prod').text($('#part_list_body tr').length);     
  } else {
  products = $('tr').find("td:contains('"+$product_dd+"')").length;
  $('#count_co_prod').text(products); 
  }
}

的HTML

<select id="product_select" onchange="filterProduct()" style="width:300px">
<option value="All">All</option>
<option value="Communications">Communications</option>
<option value="Software">Sofware</option>
</select>

<p>Count Product Category: <span style="color:red" id="count_co_prod"></span></p>

<table id="part_list" width="500px" border="1">
  <thead>
    <tr>
      <th>Company</th>
      <th>Product Category</th>
    </tr>
  </thead>
  <tbody id="part_list_body">
    <tr>
      <td>1C</td>
      <td>Communications</td>
    </tr>
    <tr>
      <td>2S</td>
      <td>Software</td>
    </tr>
  ...
  </tbody>
</table>

DK3

您可以那样使用，希望对您有所帮助。

function filterProduct(){
 $product_dd = $('#product_select').val();
 if($product_dd =="All"){
  $('#count_co_prod').text($('#part_list_body tr').length);       
 } else {
    products = $('tr').find("td:contains('"+$product_dd+"')").length;
    var tablerow = $('tr').find("td:contains('"+$product_dd+"')").parent();
 $(tablerow).remove();
 $("#part_list_body").prepend(tablerow);
 $('#count_co_prod').text(products); 
 }
}

在这里演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。