html表：为每列的最高值添加一个类

Question

有没有办法找到每列的最大值（在 html 表中）并使用 js 或 jQuery 向其中添加一个类？

注意：该表是使用<thead> 和<tbody> 构建的

表格如下所示：

  <table>
    <thead>
      <tr>
        <th class="age">age</th>
        <th class="success">success</th>
        <th class="weight">weight</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>20</td>
        <td>30%</td>
        <td>70.5kg</td>
      </tr>
      <tr>
        <td>30</td>
        <td>40%</td>
        <td>80.9kg</td>
      </tr>
      <tr>
        <td>13</td>
        <td>60%</td>
        <td>20.53kg</td>
      </tr>
      <tr>
        <td>44</td>
        <td>80.44%</td>
        <td>20kg</td>
      </tr>
    </tbody>
  </table>

Codepen

Answer 1

FIDDLE - http://jsfiddle.net/tariqulazam/esfj9/

JAVASCRIPT

var $table = $("#mytable");
$table.find("th").each(function(columnIndex)
{
    var oldValue=0, currentValue=0, $elementToMark;
    var $trs = $table.find("tr");
    $trs.each(function(index, element)
    {
        $(this).find("td:eq("+ columnIndex +")").each(function()
        {
            if(currentValue>oldValue)
               oldValue = currentValue;
            currentValue = parseFloat($(this).html());
            if(currentValue > oldValue)
            {
                $elementToMark = $(this);
            }
            if(index == $trs.length-1)
            {
              $elementToMark.addClass("highest"); 
            }
        });
    });
});​

​CSS

.highest{
    color:Red;
}​

Answer 2

​这是我制作的 JSFiddle：JSFiddle

这是函数，使用 jQuery

function MarkLargest() {
    var colCount = $('th').length;
    var rowCount = $('tbody tr').length;
    var largestVals = new Array();

    for (var c = 0; c < colCount; c++) {
        var values = new Array();
        for (var r = 0; r < rowCount; r++) {
            var value = $('tbody tr:eq(' + r + ') td:eq(' + c + ')').text();
            value = value.replace("%", "").replace("kg", "");
            values.push(value);
        }
        var largest = Math.max.apply(Math, values);
        largestVals.push(largest);

        $('tbody tr').each(function() {
            var text = $(this).find('td:eq(' + c + ')').text();
            text = text.replace("%", "").replace("kg", "");
            if (text == largest) {
                $(this).find('td:eq(' + c + ')').addClass("max");
            }
        });
    }

    return largestVals[column];
}

$(function() {
    MarkLargest();
})​

Answer 3

好的，我的第一个答案只返回了特定列的最高值。我认为这就是您正在寻找的（在 vanilla JavaScript 中）：

HTML

  <table id="mytable">
    <thead>
      <tr>
        <th class="age">age</th>
        <th class="sucess">sucess</th>
        <th class="weight">weight</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>20</td>
        <td>30%</td>
        <td>70.5kg</td>
      </tr>
      <tr>
        <td>30</td>
        <td>40%</td>
        <td>80.9kg</td>
      </tr>
      <tr>
        <td>13</td>
        <td>60%</td>
        <td>20.53kg</td>
      </tr>
      <tr>
        <td>44</td>
        <td>80.44%</td>
        <td>20kg</td>
      </tr>
    </tbody>
  </table>

JavaScript

function markColumnCeilings ( table ) {

    if ( table === null ) return;

    var thead = table.tHead,
        tbody = table.tBodies[0],
        rowCount = tbody.rows.length,
        colCount = thead.rows[0].cells.length,
        maxvalues = new Array( colCount ),
        maxCells = new Array( colCount ),
        i = rowCount - 1,
        j = colCount - 1,
        cell, value;

    // Loops through rows/columns to get col ceilings
    for ( ; i > -1 ; i-- ) {

        for ( ; j > -1 ; j-- ) {

            cell = tbody.rows[ i ].cells[ j ];
            value = parseFloat( cell.innerHTML );

            if ( value.toString() === "NaN" ) continue;

            if ( value > ( maxvalues[ j ] === undefined ? -1 : maxvalues[ j ] ) ) {
                maxvalues[ j ] =  value;
                maxCells[ j ] = i + "," + j;
            }

        }

        j = colCount - 1;

    }

    // Set classes
    for ( ; j > -1 ; j-- ) {
        tbody.rows[ maxCells[ j ].split( "," )[ 0 ] ]
             .cells[ maxCells[ j ].split( "," )[ 1 ] ]
             .setAttribute( "class", "max" );
    }

}

var table = document.getElementById( 'mytable' );
markColumnCeilings( table );

CSS

td.max { font-weight: bold; }

小提琴：http://jsfiddle.net/kboucher/cH8Ya/