如何根据每个 td 单元格中找到的最高到最低值重新排序表行？ [复制]答案

【问题标题】：How can i reorder table rows based on the highest to lowest value found in each td cell? [duplicate]如何根据每个 td 单元格中找到的最高到最低值重新排序表行？ [复制]
【发布时间】：2021-11-06 22:43:48
【问题描述】：

我正在加载 jQuery，所以想使用它我希望对下表行重新排序，以便在每个“td.points”单元格中找到的最高值显示在表中的第一个到最后一个。我怎样才能实现它？谢谢

<table id="livescoring_summary">
   <caption><span>Scoring</span></caption>
   <tbody>
      <tr>
         <th colspan="3">Week 1</a></th>
      </tr>
      <tr class="eventablerow">
         <td>Dynasty Addict</td>
         <td class="points" id="fid_00021">0.000</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="oddtablerow">
         <td>DeHavilland Beavers</td>
         <td class="points" id="fid_00051">4.000</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="eventablerow">
         <td>Unbelievable</td>
         <td class="points" id="fid_00061">5.000</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="oddtablerow">
         <td>Sonic Boom</td>
         <td class="points" id="fid_00071">0.000</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="eventablerow">
         <td>96 Dead Monkeys</td>
         <td class="points" id="fid_00081">61.000</td>
            <td><a>Details</a></td>
      </tr>
      <tr class="oddtablerow">
         <td>Wolf of DAynasty</td>
         <td class="points" id="fid_00091">23.000</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="oddtablerow">
         <td>Marshall Matters</td>
         <td class="points" id="fid_00111">0.000</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="eventablerow">
         <td>Baltimorons</td>
         <td class="points" id="fid_00121">21.000</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="oddtablerow">
         <td>WGAFF</td>
         <td class="points" id="fid_00131">61.875</td>
         <td><a>Details</a></td>
      </tr>
   </tbody>
</table>

【问题讨论】：

标签： jquery

【解决方案1】：

const tbody = $('tbody');
const rows = tbody.find('tr').sort(function(a, b) {
    let ap = $(a).find('.points');
    let bp = $(b).find('.points');
    if (ap.length && bp.length) {
      return bp[0].innerHTML - ap[0].innerHTML;
    }
});
$('tbody').append(rows);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="livescoring_summary">
   <caption><span>Scoring</span></caption>
   <tbody>
      <tr>
         <th colspan="3">Week 1</th>
      </tr>
      <tr class="eventablerow">
         <td>Dynasty Addict</td>
         <td class="points" id="fid_00021">0.000</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="oddtablerow">
         <td>DeHavilland Beavers</td>
         <td class="points" id="fid_00051">4.000</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="eventablerow">
         <td>Unbelievable</td>
         <td class="points" id="fid_00061">5.000</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="oddtablerow">
         <td>Sonic Boom</td>
         <td class="points" id="fid_00071">0.000</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="eventablerow">
         <td>96 Dead Monkeys</td>
         <td class="points" id="fid_00081">61.000</td>
            <td><a>Details</a></td>
      </tr>
      <tr class="oddtablerow">
         <td>Wolf of DAynasty</td>
         <td class="points" id="fid_00091">23.000</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="oddtablerow">
         <td>Marshall Matters</td>
         <td class="points" id="fid_00111">0.000</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="eventablerow">
         <td>Baltimorons</td>
         <td class="points" id="fid_00121">21.000</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="oddtablerow">
         <td>WGAFF</td>
         <td class="points" id="fid_00131">61.875</td>
         <td><a>Details</a></td>
      </tr>
   </tbody>
</table>

【讨论】：