JQuery - Re-arrange table rows based on select dropdown value

Question

I have a select dropdown and a table. What I'd like to do is when we select from the dropdown menu, a count will be displayed to let us know how many items are in the table (this was done) and also re-arrange the row by bringing the queried/relevant rows to the top. In the example, I'd like for all rows with "Software" to be brought to the top if Software was selected from the dropdown. Thanks for help!

Here's what I have so far - jquery 1.7.2
https://jsfiddle.net/hv0wfds4/12/

Here's the code: 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

you can use like that, i hope it helps you.

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

This should do it

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

Working JSFiddle here: https://jsfiddle.net/GSarathChandra/hv0wfds4/26/

Answer 3

Its only possible using dynamic table creating because you have not using any database your data is hard coded try to add array[] in your data and use dynamic creating html table or search Datatable its reach functionality of grid.

suggested link,

Reference