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

Question

Here is my table

<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>

How can I get each column since the second (after the names) and set the highest value class high, the lowest value class low? If more td have same value and is highest (or lowest) all must have proper class.

$('#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);
});

This is what I have yet. I don't like much that im using for variables basicly same code. Is there a way how to make it dry?

Answer 1

You can loop over td s and find min and max and process accordingly

 $(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

You can use map() to find min and max value of each tr and add classes.

 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

This one seems to work for me:

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');
        }
    });

});

Where offset is the number of columns before the actual values start ( just in case you only delivered simplified data).