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.

First of all don't use overlapping ids, if you need duplicate identifiers, use classes or data instead, as you've already used. Also, what do you mean by sort, sort it alphabetically? Hide the non-health stuff? — A. L
– A. L, Commented May 17, 2017 at 6:22
Thanks for your reply. By sort, I meant to move the table rows having Select value in Health column to the beginning of table. Hope, I'm clear now. — harshavmb
– harshavmb, Commented May 17, 2017 at 6:24
nope. I want the complete table row to be moved up in that table. This is the screenshot of expected html. imagebin.ca/v/3MkTfpglOG3q — harshavmb
– harshavmb, Commented May 17, 2017 at 6:30

A. L · Accepted Answer · 2017-05-17 07:02:28Z

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>

Just let me know if you didn't understand anything, thought I didn't need too much explanation since it's pretty short

Collectives™ on Stack Overflow

jquery sort table rows based on the custom column value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related