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/

Answer 4

我已经修改了@sbonkosky的功能，以便能够管理各种表。在我的情况下，我有各种表格，并且它们混合了所有表格的值。

function GetLargestValueForColumn(table) {
        let colCount = $('table:eq('+ table +') th').length;
        let rowCount = $('table:eq('+ table +') tbody tr').length;
        let largestVals = new Array();

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

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

html表：将类添加到每列的最高值

4 个答案: