jquery sort table rows based on the custom column value

Question

I do have the below html having table data.

<table id="decisionTable" class= "CSSTableGenerator" width ="100%" border =1 id="table1">
  <tr color="23145">
       <th><b>CheckList</b></th>
       <th><b>Health</b></th>
       <th><b>Comments</b></th>
</tr>
<tr>
  <td id="checklist" data-id="checklist">
            Trend of Failed Login attempts
  </td>
  <td id="health">Green</td> 
  <td><textarea type="text" name='Comments' id="comments"></textarea></td>
</tr>
<tr>
  <td id="checklist" data-id="checklist">
            Trend of mobile Login attempts
  </td>
  <td id="health">Select</td> 
  <td><textarea type="text" name='Comments' id="comments"></textarea></td>
</tr>
<tr>
  <td id="checklist" data-id="checklist">
            Trend of Success Login attempts
  </td>
  <td id="health">Red</td> 
  <td><textarea type="text" name='Comments' id="comments"></textarea></td>
</tr>
<tr>
  <td id="checklist" data-id="checklist">
            Trend of unknown Login attempts
  </td>
  <td id="health">Amber</td> 
  <td><textarea type="text" name='Comments' id="comments"></textarea></td>
</tr>
<tr>
  <td id="checklist" data-id="checklist">
            Trend of mixed Login attempts
  </td>
  <td id="health">Select</td> 
  <td><textarea type="text" name='Comments' id="comments"></textarea></td>
</tr>
</table>

I've to sort table rows based on the values present in Health . I want the table rows having Select value in Health column to be shown on top of the table.

I've managed to write below jquery to find the td value present in Health column.

$(document).ready(function() {
  $('#decisionTable tr').each(
            function() {
                console.log($(this).find('td[id="health"]')
                        .text());
            });
});

I got to know there is an in-built jquery function Jquery.sort() to get this done, however I'm not sure how to sort based on the Select value alone in the Health column.

Any help would be much appreciable.

Many Thanks in advance.

Answer 1

Is this what you want? You just basically need to find anything that has the word "select" in it then append it after the header (I suggest you to use <thead> next time instead).

I editted your header row with the id "header"

 $('#decisionTable tr').each( function() { var row = $(this).find('td[id="health"]:contains("Select")'); if (row.length) { $("#header").after($(this)); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="decisionTable" class= "CSSTableGenerator" width ="100%" border =1 id="table1"> <tr color="23145" id="header"> <th><b>CheckList</b></th> <th><b>Health</b></th> <th><b>Comments</b></th> </tr> <tr> <td id="checklist" data-id="checklist"> Trend of Failed Login attempts </td> <td id="health">Green</td> <td><textarea type="text" name='Comments' id="comments"></textarea></td> </tr> <tr> <td id="checklist" data-id="checklist"> Trend of mobile Login attempts </td> <td id="health">Select</td> <td><textarea type="text" name='Comments' id="comments"></textarea></td> </tr> <tr> <td id="checklist" data-id="checklist"> Trend of Success Login attempts </td> <td id="health">Red</td> <td><textarea type="text" name='Comments' id="comments"></textarea></td> </tr> <tr> <td id="checklist" data-id="checklist"> Trend of unknown Login attempts </td> <td id="health">Amber</td> <td><textarea type="text" name='Comments' id="comments"></textarea></td> </tr> <tr> <td id="checklist" data-id="checklist"> Trend of mixed Login attempts </td> <td id="health">Select</td> <td><textarea type="text" name='Comments' id="comments"></textarea></td> </tr> </table>