突出显示每个表格行中的最高第 n 个值

Question

我有下表，我想在每行的前 5 个值中添加一个类，仅添加具有“championshipPoints”类的 TD。 经过一些搜索和反复试验，我设法将课程添加到最高值，但我正在努力进一步。

如果第 6 个和第 7 个值相同，我只希望突出显示其中一个。 我想尝试自己解决，但可以用一个或两个指针来启动我。

提前致谢。

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>

杰昆

$(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

Answer 1

使用sort()和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>

Answer 2

你非常接近。 我做了这个 js 小提琴

$(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')
    })
  });
});

我得到值，对值进行排序，得到第 5 个最大的数，然后遍历表并通过添加一个类来突出显示 >=第 5 个最大的数。