Question

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

这是我到目前为止所拥有的 - 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>

Answer 1

你可以这样使用，我希望它可以帮助你。

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); 
 }
}

demo here

Answer 2

这应该这样做

function filterProduct(){
  var product_dd = $('#product_select').val();   
  if(product_dd =="All"){
    var els = $('tbody tr').sort( function(a,b){
        return $(b).find('td:first').text() < $(a).find('td:first').text();
    });
    $('tbody').append(els);
    $('#count_co_prod').text($('#part_list_body tr').length);     
  } else { 
    var products = 0;
    $('tbody tr').each( function(){
        if($(this).find('td:last').text() != product_dd){
            $(this).prop('sortOrder', -1);
        } else {
            products++;
            $(this).prop('sortOrder', 1);
        }
    });
    var els = $('tbody tr').sort( function(a,b){
        return parseInt($(b).prop('sortOrder')) -  parseInt($(a).prop('sortOrder'));
    });
    $('tbody').append(els);
    $('#count_co_prod').text(products);
  }
}

在这里工作JSFiddle：https://jsfiddle.net/GSarathChandra/hv0wfds4/26/

Answer 3

它唯一可能使用动态表创建，因为你没有使用任何数据库，你的数据是硬编码的，试着在你的数据中添加array []并使用动态创建html表或搜索Datatable它的网格覆盖功能。

建议的链接，

Reference

JQuery - 根据select下拉值重新排列表行

3 个答案: