4

（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

4

4 に答える 4

6

フィドル-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"); 
            }
        });
    });
});​

<strong> CSS

.highest{
    color:Red;
}​
于 2012-10-27T03:51:43.487 に答える
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();
})​
于 2012-10-27T03:17:57.093 に答える
0

OK、私の最初の答えは特定の列の最高値のみを返しました。これがあなたが探しているものだと思います（バニラ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/

于 2012-10-27T04:12:39.570 に答える
0

@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)});
})
于 2018-09-08T15:46:17.493 に答える