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>