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值的表格行显示在表格的顶部。

我设法在jquery下面写一下，找到td列中的Health值。

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

我知道有一个内置的jquery函数Jquery.sort()来完成这项工作，但我不确定如何根据Select中的Health值进行排序}专栏。

任何帮助都会非常明显。

非常感谢提前。

Answer 1

这是你想要的吗？你只需要找到任何包含“select”字样的内容，然后在标题后附加它（我建议你下次使用<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>

基于自定义列值

1 个答案: