jquery sortiere Tabellenzeilen basierend auf dem benutzerdefinierten Spaltenwert

Question

Ich habe die unten html mit Tabellendaten.

<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> 

Ich habe Tabellenzeilen zu sortieren, basierend auf den aktuellen Werten in Health. Ich möchte die Tabellenzeilen mit Select Wert in Health Spalte oben auf der Tabelle angezeigt werden.

Ich habe es geschafft, unter jquery zu schreiben, um den td Wert in Health Spalte zu finden.

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

bekam ich wissen, dass es eine eingebaute Funktion jquery Jquery.sort() dazu, ich bin nicht sicher, aber getan, wie in den Health Spalt basierend auf den Select Wert allein zu sortieren.

Jede Hilfe wäre sehr spürbar.

Vielen Dank im Voraus.

Answer 1

Ist das was du willst? Sie müssen nur etwas finden, das das Wort "select" enthält, und es nach der Überschrift anhängen (ich schlage vor, dass Sie das nächste Mal stattdessen <thead> verwenden).

editierte ich Ihre Kopfzeile mit der 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>