javascript - html 表 : adding a class to the highest value of each column

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;
}​