3

我有一个数据表，我试图一目了然地查看它并找到每一行的最高数字。

为此，我添加了一个名为最高到最高的 css 类，<td>如下所示

  <tr>
      <td>4.2</td>
      <td class="highest">5.0</td>
      <td>2.9</td>
  </tr>

有了这个 CSS

td.highest {font-weight:bold;}

但这都是硬编码的，我正在尝试解决如何使用 jquery 编写它，但我对 js 很陌生，不确定是否要开始，我正在考虑使用Math.max，但我可以告诉它要使用关于数组，而不是阅读 html，有什么想法吗？

我在这里做了一个 jsfiddle - http://jsfiddle.net/pudle/vEUUQ/

4

4 回答 4

7

第一次 bash - 可能会提供更短（并且可能更有效）的答案......

$('tr').each(function() {
    var $td = $(this).children();

    // find all the values
    var vals = $td.map(function() {
        return +$(this).text();
    }).get();

    // then find their maximum
    var max = Math.max.apply(Math, vals);

    // tag any cell matching the max value
    $td.filter(function() {
        return +$(this).text() === max;
    }).addClass('highest');
});

演示在http://jsfiddle.net/alnitak/DggUN/

于 2013-05-02T14:34:41.633 回答
1

基于此结构：

<table>
    <tr>
      <td>4.2</td>
      <td>5.0</td>
      <td>2.9</td>
  </tr>
</table>

您可以使用 JS/jQuery 并执行以下操作：

var highest = 0;

$("table tr td").each(function() {
     var current = $(this).text();
    if (current > highest) {
       highest = current;
       $(".highest").removeClass();
       $(this).addClass('highest');   
    }
});

http://jsfiddle.net/syU82/

于 2013-05-02T14:32:37.967 回答
0

我能想到的最简单的事情是使用http://underscorejs.org/#max或http://lodash.com/docs#max并传入一个对此进行过滤的函数。

var result = _.max($("td"),function(td){ return parseFloat($(td).text()); });
result.addClass("highest");

否则你可以做很长的路要走：

var result,max 0;
$("td").filter(function(){
   var myval = parseFloat($(this).text());
   if(myval > max){
      result = this;
      max = myval;
   }
});
result.addClass("highest");
于 2013-05-02T14:34:17.290 回答
0

另一个解决方案，虽然不如其他一些解决方案。

$('tr').each(function() {
    var $highest_el;
    var highest_num;

    $('td', this).each(function() {
        if ( $highest_el === undefined || parseFloat($(this).text()) > highest_num ) {
            $highest_el = $(this);
            highest_num = $(this).text();
        }
    });

    $highest_el.addClass('highest');
});

jsFiddle：http: //jsfiddle.net/hRJLQ/2/

于 2013-05-02T14:36:18.577 回答