jQuery / JavaScript在表列中找到最高價值

Question

這是我的桌子

<table id="aktivita">
  <tr>
    <td>Jack</td>
    <td>450</td>
    <td>794</td>
    <td>784</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>145</td>
    <td>794</td>
    <td>789</td>
  </tr>
  <tr>
    <td>Mike</td>
    <td>2794</td>
    <td>2794</td>
    <td>79</td>
  </tr>
</table>

如何獲得第二列（名稱之后）的每一列，並將最高值類別設置為高，將最低價值類別設置為低？ 如果更多的td具有相同的值並且最高（或最低），則所有td必須具有適當的類別。

$('#aktivita tr').each(function(){
  var first = $(this).find("td:nth-of-type(2)").text();
  var second = $(this).find("td:nth-of-type(3)").text();
  var third = $(this).find("td:nth-of-type(4)").text();


  console.log(first);
  console.log(second);
  console.log(third);
});

這就是我所擁有的。 我不太喜歡即時消息用於基本上相同代碼的變量。 有沒有辦法使它干燥？

Answer 1

您可以遍歷td s並找到min和max並進行相應處理

 $(function(){ var cols = [] var trs = $('#aktivita tr') var data =$.each(trs , function(index, tr){ $.each($(tr).find("td").not(":first"), function(index, td){ cols[index] = cols[index] || []; cols[index].push($(td).text()) }) }); cols.forEach(function(col, index){ var max = Math.max.apply(null, col); var min = Math.min.apply(null, col) $('#aktivita tr').find('td:eq('+(index+1)+')').each(function(i, td){ $(td).toggleClass('max', +$(td).text() === max) $(td).toggleClass('min', +$(td).text() === min) }) }) }) 

 .max { color: blue } .min { color: red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table id="aktivita"> <tr> <td>Jack</td> <td>450</td> <td>794</td> <td>784</td> </tr> <tr> <td>Steve</td> <td>145</td> <td>794</td> <td>789</td> </tr> <tr> <td>Mike</td> <td>2794</td> <td>2794</td> <td>79</td> </tr> </table> 

Answer 2

您可以使用map()查找每個tr最小值和最大值並添加類。

 var i = 1; while (i < $('tr:first-child td').length) { var ar = $('table tr').map(function() { return Number($(this).find('td:nth-child(' + (i + 1) + ')').text()); }) var max = Math.max.apply(null, ar); var min = Math.min.apply(null, ar); var ar = $('table tr').find('td').each(function() { if (Number($(this).text()) == max) { $(this).addClass('max'); } else if (Number($(this).text()) == min) { $(this).addClass('min'); } }) i++; } 

 .max { color: red; } .min { color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="aktivita"> <tr> <td>Jack</td> <td>450</td> <td>794</td> <td>784</td> </tr> <tr> <td>Steve</td> <td>145</td> <td>794</td> <td>789</td> </tr> <tr> <td>Mike</td> <td>2794</td> <td>2794</td> <td>79</td> </tr> </table> 

Answer 3

這個似乎對我有用：

var offset = 1;

$('#aktivita tr').each(function () {
    var values = [];

    $(this).children('td').each(function (i,v) {
        if (i < offset) return;
        var value = parseInt($(this).text());
        if(!isNaN(value))
            values.push(value);
    });

    var maxValue = Math.max.apply(null, values);
    var minValue = Math.min.apply(null, values);

    $(this).children('td').each(function () {
        if ($(this).text() == maxValue.toString()) {
            $(this).addClass('max');
        }

        if ($(this).text() == minValue.toString()) {
            $(this).addClass('min');
        }
    });

});

其中offset是實際值開始之前的列數（以防萬一，您僅提供了簡化的數據）。