Highlight highest nth values in each table row

I have the following table, I am wanting to add a class to the top 5 values in each row, only of the TD's with the class of 'championshipPoints'. After some searching and trial and error, I have managed to get the class added to the highest value, but I am struggling to get any further.

If the 6th and 7th values are the same I only want one of them highlighted. I would like to try and solve on my own but could do with a pointer or 2 to start me off.

Thanks in advance.

HTML

<table id="2020societyChampionship">
    <tbody>
     <tr class='memberPoints'>
        <td>1</td>
        <td class='playerName' scope='row'>player1</td>
        <td class='championshipPoints'>6</td>
        <td class='championshipPoints'>20</td>
        <td class='championshipPoints'>7</td>
        <td class='championshipPoints'>13</td>
        <td class='championshipPoints'>0</td>
        <td class='championshipPoints'>20</td>
        <td class='championshipPoints'>25</td>
        <td class='championshipPoints'>0</td>
        <td class='championshipPoints'>11</td>
        <td class='championshipPoints'>11</td>
        <td class='championshipPoints'>0</td>
        <td>100</td>
     </tr>
     <tr class='memberPoints'>
        <td>1</td>
        <td class='playerName' scope='row'>player2</td>
        <td class='championshipPoints'>25</td>
        <td class='championshipPoints'>20</td>
        <td class='championshipPoints'>8</td>
        <td class='championshipPoints'>11</td>
        <td class='championshipPoints'>0</td>
        <td class='championshipPoints'>16</td>
        <td class='championshipPoints'>22</td>
        <td class='championshipPoints'>0</td>
        <td class='championshipPoints'>11</td>
        <td class='championshipPoints'>11</td>
        <td class='championshipPoints'>0</td>
        <td>100</td>
     </tr>
    </tbody>

JQ

$(document).ready(function(){
  $('tbody tr').each(function() {

     var $tds = $(this).find('.championshipPoints');
     var values = $tds.map(function(){return parseFloat($(this).text());}).get();

       $tds.eq(values.reduce((iMax, x, i, arr) => x > arr[iMax] ? i : iMax, 
        0)).addClass('highestFive');
  });  
});

JSFiddle

2 answers

  • answered 2019-12-09 13:38 TKoL

    You were pretty close. I've made this js fiddle

    $(document).ready(function() {
      $('tbody tr').each(function() {
    
        var $tds = $(this).find('.championshipPoints');
        var values = $tds.map(function() {
          return parseFloat($(this).text());
        }).get();
        values.sort((a, b) => a - b);
        console.log(values);
    
        const highlightAbove = values[values.length - 5];
        $tds.each(function() {
          var val = parseFloat($(this).text());
          if (val >= highlightAbove) $(this).addClass('h')
        })
      });
    });
    

    I get the values, sort the values, get the 5th largest number, and then iterate over the tables and highlight the ones >= the 5th largest number by adding a class.

  • answered 2019-12-09 13:39 User863

    Using sort() and slice()

    $('tbody tr').each(function() {
      $(this).find('.championshipPoints').sort(function(a, b) {
        return b.innerText - a.innerText;
      }).slice(0, 5).addClass('highestFive')
    });
    .highestFive {
      background: yellow;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table id="2020societyChampionship">
      <tbody>
        <tr class='memberPoints'>
          <td>1</td>
          <td class='playerName' scope='row'>player1</td>
          <td class='championshipPoints'>6</td>
          <td class='championshipPoints'>20</td>
          <td class='championshipPoints'>7</td>
          <td class='championshipPoints'>13</td>
          <td class='championshipPoints'>0</td>
          <td class='championshipPoints'>20</td>
          <td class='championshipPoints'>25</td>
          <td class='championshipPoints'>0</td>
          <td class='championshipPoints'>11</td>
          <td class='championshipPoints'>11</td>
          <td class='championshipPoints'>0</td>
          <td>100</td>
        </tr>
        <tr class='memberPoints'>
          <td>1</td>
          <td class='playerName' scope='row'>player2</td>
          <td class='championshipPoints'>25</td>
          <td class='championshipPoints'>20</td>
          <td class='championshipPoints'>8</td>
          <td class='championshipPoints'>11</td>
          <td class='championshipPoints'>0</td>
          <td class='championshipPoints'>16</td>
          <td class='championshipPoints'>22</td>
          <td class='championshipPoints'>0</td>
          <td class='championshipPoints'>11</td>
          <td class='championshipPoints'>11</td>
          <td class='championshipPoints'>0</td>
          <td>100</td>
        </tr>
      </tbody>
    </table>