jQuery-根據選擇下拉列表值重新排列表行

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

在這里演示

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及其網格功能。

建議的鏈接，

參考