代码之家 › 专栏 › 技术社区 › Dipak

比较td值并动态设置秩

jquery

Dipak · 技术社区 · 7 年前

价值观 td 都是从PHP生成的,现在需要比较这些值,并根据值设置诸如('1,2,3…')的排名,动态使用jquery。例如,我设置了静态秩 1

$(document).ready(function(){
  var high = Math.max.apply(Math, $('.rank').map(function(){
    return $(this).text()
  }))
  $('.rank').each(function(){
    var mark = $(this).text();
    if(mark == high){ 
      $(this).find('span#rank').text(' (1)');
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
  </head>
  <body>
    <table>
      <tr>
        <th>Student</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>John</td>
        <td class='rank'>20<span id='rank'></span></td>
      </tr>
      <tr>
        <td>Jack</td>
        <td class='rank'>40<span id='rank'></span></td>
      </tr>
      <!-- Multiple Tr are here, generated from php -->
     </table>
  </body>
</html>

2 回复 | 直到 7 年前

void 7 年前

首先 id 在文档中必须是唯一的。要获得军衔:

按升序排列此数组
重复 .rank
这将是你的绝对排名。

let allRanks = [];
$('.rank').each(function(){
    allRanks.push( +$(this).text() );
})
allRanks.sort();

$(".rank").each(function(){
  let rankVal = +$(this).text();
  let rank = allRanks.indexOf(rankVal)+1;
  $(this).find(".innerrank").html(" ("+rank+")")
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
  </head>
  <body>
    <table>
      <tr>
        <th>Student</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>John</td>
        <td class='rank'>20<span class='innerrank'></span></td>
      </tr>
      <tr>
        <td>Jack</td>
        <td class='rank'>40<span class='innerrank'></span></td>
      </tr>
      <tr>
        <td>Jack</td>
        <td class='rank'>30<span class='innerrank'></span></td>
      </tr>
      <!-- Multiple Tr are here, generated from php -->
     </table>
  </body>
</html>

注:当多个等级值相同时,您可能需要处理这种情况。

Bhushan Kawadkar 7 年前

见下面的代码

$(document).ready(function(){
  var arr = new Array();
  $('.rank').each(function(){
    arr.push($(this).text());
  });
  arr.sort();
  $.each(arr, function( index, value ) {
    $('.rank:contains(' + value + ')').find('span.rankNumber').html(index+1);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
  </head>
  <body>
    <table>
      <tr>
        <th>Student</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>John</td>
        <td class='rank'>20<span class='rankNumber'></span></td>
      </tr>
      <tr>
        <td>Jack</td>
        <td class='rank'>40<span class='rankNumber'></span></td>
      </tr>
      <!-- Multiple Tr are here, generated from php -->
     </table>
  </body>
</html>