0

I'm loading jQuery , so would like to use that I want have the following table rows reordered so the highest value found in each "td.points" cell shows first to last in the table. How can I achieve it? Thanks

<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>
Dennis Kozevnikoff
  • 2,078
  • 3
  • 19
  • 29
MShack
  • 642
  • 1
  • 14
  • 33

1 Answers1

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>
0stone0
  • 34,288
  • 4
  • 39
  • 64