Question

我在表格中有一些数据如下：

Adam    $50
Evan    $20
Frank   $80
Harold  $90
Jeff    $20
Linus   $10
Sam     $87
Zach    $100

结果按字母顺序按名称排序，旁边可以有任意金额。

我需要将前五个数字加粗和红色，并在前五个名称旁边添加＃1，＃2，＃3等。

jQuery可以不用$ column排序吗？

Answer 1

$(function ()
{
    var i = 5,
        values = $('#myTable').find('td:odd').map(function (i, elt)
                 {
                     var $elt = $(elt);
                     return {$td: $elt,
                             value: parseFloat($elt.text().slice(1))};
                 }).get().sort(function (a,b)
                 {
                    return b.value-a.value;
                 });

    while(i--)
    {
        values[i].$td.css({fontWeight: 'bold', color: '#F00'})
                     .prev().append(' #' + (i+1));
    }
});

运行演示： http://jsbin.com/iseme3/7

随意询问您不理解的任何内容。

Answer 2

不直接，这太具体了，无法由抽象框架层处理。但是，您可以相当轻松地完成此任务。对于像这样的表：

<table id="table_id">
   <tr><th class="rank"></th><th class="name">Name</th><th class="amount">Amount</th></tr>

   <tr><td></td><td>Adam</td><td>$50</td></tr>
   <tr><td></td><td>Evan</td><td>$20</td></tr>
   <tr><td></td><td>Frank</td><td>$80</td></tr>
   <tr><td></td><td>Harold</td><td>$90</td></tr>
   <tr><td></td><td>Jeff</td><td>$20</td></tr>
   <tr><td></td><td>Linus</td><td>$10</td></tr>
   <tr><td></td><td>Sam</td><td>$87</td></tr>
   <tr><td></td><td>Zach</td><td>$100</td></tr>
</table>

你可以这样做：

var top = 5;  // apply only transformation to the top n rows
var rankCol, nameCol, amountCol;

$('#table_id').find('tr')
   // get first row and find where are the name and amount columns...
   .slice(0, 1).each(function(i,row) {
      rankCol = $(row).find('.rank').index();
      nameCol = $(row).find('.name').index();
      amountCol = $(row).find('.amount').index();
   }).end()
   // remove first row
   .slice(1)
   // sort returned set by 'amount' in ascending order
   .sort(function(a,b) {
      return parseFloat($(a).find('td:eq('+amountCol+')').text().substr(1)) - parseFloat($(b).find('td:eq('+amountCol+')').text().substr(1));
   })
   // get the last 'top' rows
   .slice(-top)
   // apply bold + red to column 'amount'
   .find('td:eq('+amountCol+')').css({'font-weight':'bold', 'color':'red'}).end()
   // prepend #n to column 'rank'
   .find('td:eq('+rankCol+')').each(function(i,col) {
      $(col).text('#'+(top-i)+'. ');
   })
;

代码的组织是为了提高可读性，同时也让您了解JQuery如何应用可重用模式来对结果的调用进行链接。如果您的表格布局不同，例如您有5列，“金额”在第5列，那么代码仍然可以不加修改地工作，您只需要为“名称”和“金额”列设置一些类名并在第一行中查找该课程。

** 编辑 **我还添加了一个保留列来放置排名的文本。这渲染nameCol已过时，但无论如何我都将其保留在代码中。拥有这样一个保留列可以很好地排列所有内容。 :)顶行的数量现在是基于变量的。 ...我仍然可以使用代码来使其更加灵活/可重复使用，但我认为你明白了。

** 注意 **您可以将css()调用替换为addClass()，而不是将其定义为粗体+红色。您甚至可以使用prepend(string)替换prepend(element)来电，这样您就可以在名称前设置“#n”样式。

Answer 3

这是另一种方法。

var arr = $('#mytable').find('td:last-child')
  .map( function(){
    var cleanval = parseInt( $(this).text().replace('$',''),10 );
    $(this).addClass('s_'+cleanval);
    return cleanval;
  })
  .get()
  .sort( function(a,b){ return (b-a); } )
  .slice(4);

for( var i=0,j=arr.length;i<j;i++ ) {
    $('td.s_'+arr[i]).addClass('colorize');
}

这是一个有效的fiddle。

jQuery值大于第6个元素？

3 个答案: