jQuery/JavaScript查找表列中的最大值

jQuery/JavaScript find highest value in table column

本文关键字：最大值 JavaScript 查找 jQuery      更新时间：2023-09-26

这是我的表格

<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具有相同的值并且是最高的(或最低的)，则它们必须具有适当的类。

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

这是我所拥有的。我不太喜欢我使用的变量基本相同的代码。有办法让它变干吗?

您可以遍历td s并找到最小值和最大值并相应地处理

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

这个似乎对我有用:

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是实际值开始前的列数(以防您只交付简化的数据)。

您可以使用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>

相关文章：