jquery根据自定义列值对表行进行排序

苛刻的

我确实有以下包含表格数据的 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列中进行排序

任何帮助将是非常可观的。

提前谢谢了。

A.L

这是你想要的吗?您基本上只需要找到任何包含“选择”一词的内容,然后将其附加在标题之后(我建议您<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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章