jQueryJavaScript find highest value in table column - Stack Overflow

admin管理员组

文章数量:1416567

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?

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?

• javascript
• html-table

Share Improve this question Follow asked Oct 18, 2016 at 10:27 OstrovOstrov 12944 silver badges1212 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can loop over tds 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./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>

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

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

本文标签： jQueryJavaScript find highest value in table columnStack Overflow