jQuery基於自定義列值對表行進行排序

Question

我確實有以下具有表數據的html。

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

我必須根據Health存在的值對表行進行排序。 我希望在“ Health列中具有“ Select值的表行顯示在表頂部。

我設法寫下面的jquery來找到Health列中存在的td值。

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

我知道有一個內置的jquery函數Jquery.sort()可以完成此操作，但是我不確定如何僅根據Health列中的Select值進行排序。

任何幫助將是可觀的。

提前謝謝了。

Answer 1

這是你想要的嗎？ 您基本上只需要找到其中包含“選擇”一詞的所有內容，然后將其附加在標題之后（建議您下次使用<thead> ）。

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