Javascript 在HTML表格的每一列中找到最大的数字并高亮显示

我有下面的

HTML

页面，其中有一个动态

引导表

。为了简单和理解，下面是一个示例表

#
第一人
第二人
第三人
类型1
12
25
34
类型2
4.
34
78
类型3
3.
65
90

循环遍历每个单元格，在行中找到其

索引

，并为行中的每个

索引

维护一个

最高的

字典，检查当前单元格值是最大值还是以前存储的值

因此，您将拥有一个对象，指示每列的最高值，您可以使用它高亮显示或执行任何需要的操作。您可能希望在

highest

字典中存储行索引而不是最高值

$(function() {
  var highest = {},
        highestValues = {};
      
  $('tbody td').each(function(i, td) {
    var colIndex = $(td).index() - 1;
    var rowIndex = $(td).parent().index();
    var currValue = parseInt($(td).text(), 10);

    if (currValue > (highestValues[colIndex] || 0)) {
      highest[colIndex] = rowIndex;
      highestValues[colIndex] = currValue;
    }
  });
  
  console.log(highest, highestValues);
  
  for(col in highest) {
    $('tbody tr').eq(highest[col]).find('td').eq(col).css('background', 'yellow');
  }
});

如果存在多个最大值，您可以做的是更换零件：

if (currValue > (highestValues[colIndex] || 0)) {
    highest[colIndex] = rowIndex;
    highestValues[colIndex] = currValue;
}

与：

然后，由于我们可以有多行，它们可以有一个最大值，因此我们需要在

highest[col]

中循环每一行，因此，替换该行：

 $('tbody tr').eq(highest[col]).find('td').eq(col).css('background', 'yellow');

与：

因此，最终的代码如下所示：

$（函数（）{
var最高={}，
最高值={}；
$（'tbody td'）。每个（函数（i，td）{
var colIndex=$（td）.index（）-1；
var rowIndex=$（td.parent（）.index（）；
var currValue=parseInt（$（td）.text（），10）；
var currHighest=最高值[colIndex]| | 0；
如果（电流值>电流最高值）{
最高[colIndex]=[rowIndex]；
最高值[colIndex]=当前值；
}否则如果（currValue==currHighest）{
最高[colIndex]。推送（行索引）；
}
});
for（最高列）{
for（最高[列]中的行）{
$（'tbody tr'）.eq（最高[col][row]）.find（'td'）.eq（col）.css（'background'，'yellow'）；
}
}
});

#
第一人
第二人
第三人
类型1
12
25
34
类型2
4.
34
67
类型3
3.
90
67
这是静态表吗？您是否从API调用获取数据？如果您有一个数据数组，您可以循环遍历列，并使用JavaScript在最大值上添加一个布尔标志，然后在呈现HTML的代码中使用该标志来突出显示值。这不是一个静态表。这是使用
MySql
和
php
从数据库生成的。但问题是，表是由
行
构成的。因此，我无法将这些值保存在数组中，以检查最大值是多少。如果表格是由
列构成的
，则很容易识别该列中的最大值。但遗憾的是，对于我的情况，由于其他一些限制，我无法做到这一点。关于这一点：在每个索引的循环中，循环使用您的
元素，找到最大值，保存其索引，然后突出显示它，然后移动到下一个
索引。@Anu我建议您将标题从引导表更改为仅表格？@Muhammaddatalhaakbar好的……这是正确的。我刚刚更改了它这是将最高值记录为键值对。但我如何访问相应的值并更改颜色？我尝试使用
.css（'background'，'yellow'）。但不知何故，我无法访问元素。对不起，我不太熟悉
jQuery
好的……那就行了。看到jQuery投入使用真的很迷人现在有一个小问题。如果多个索引具有相同的值，并且这些值是最大值，则不会突出显示所有值。你知道怎么解决吗？@Anu你是对的，如果有多个最大值，它将满足于第一个发现。让我看看我能做些什么do@Anu检查编辑，因为我添加了对多个最大值的支持。
var currHighest = highestValues[colIndex] || 0;

if (currValue > currHighest) {
    highest[colIndex] = [rowIndex];
    highestValues[colIndex] = currValue;
} else if(currValue === currHighest) {
    highest[colIndex].push(rowIndex);
}

 $('tbody tr').eq(highest[col]).find('td').eq(col).css('background', 'yellow');

for(row in highest[col]) {
    $('tbody tr').eq(highest[col][row]).find('td').eq(col).css('background', 'yellow');
}