カスタム列の値に基づく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にある値に基づいてテーブル行を並べ替える必要があります。私はSelectの値を持つ表の行をHealthの列に表の上に表示します。

tdの値がHealthの列にあることを確認するため、jqueryの下に書いています。私はこれを成し遂げるために、内蔵のjqueryの機能Jquery.sort()がある知った

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

は、しかし、私はHealth列内のみSelect値に基づいてソートするかどうかはわかりません。

どのような助けも非常に認められます。

多くの方々のおかげです。

Answer 1

これは必要なものですか？基本的には、「select」という単語があるものを見つけて、ヘッダの後ろに追加する必要があります（次回は代わりに<thead>を使うことをお勧めします）。

私はあなたの代わりに重複識別子、利用クラスやデータを必要とするかのように、重複IDを使用していないID「ヘッダ」すべての

$('#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>