[英]Mark highest and lowest value in HTML table
I have an HTML table and I want to mark cells by adding a class to the highest and lowest value of each column. 我有一个HTML表,我想通过向每个列的最高和最低值添加一个类来标记单元格。 I have found a few related questions here, but the code misbehaves.
我在这里找到了一些相关的问题,但是代码行为不当。
var $table = $("#mytable");
$table.find("th").each(function(columnIndex)
{
var oldValue=0, currentValue=0, $elementToMark;
var $trs = $table.find("tr");
$trs.each(function(index, element)
{
oldValue= currentValue;
var $td = $(this).find("td:eq("+ columnIndex +")");
if ($td.length!=0)
{
currentValue= parseFloat($td.html());
if(currentValue > oldValue)
{
$elementToMark= $td;
}
if(index == $trs.length-1)
{
$elementToMark.addClass("highest");
}
}
});
});
var $table = $("#mytable");
$table.find("th").each(function(columnIndex)
{
var oldValue=1000000, currentValue=1000000, $elementToMark;
var $trs = $table.find("tr");
$trs.each(function(index, element)
{
oldValue= currentValue;
var $td = $(this).find("td:eq("+ columnIndex +")");
if ($td.length!=0)
{
currentValue= parseFloat($td.html());
if(currentValue < oldValue)
{
$elementToMark= $td;
}
if(index == $trs.length-1)
{
$elementToMark.addClass("lowest");
}
}
});
});
Here is also a JSFiddle: Link 这也是一个JSFiddle: 链接
The problem is that it doesn't mark the right values and I cannot see the reason. 问题是它没有标记正确的值,我看不出原因。
You are updating the oldValue
at wrong place. 您正在错误的位置更新
oldValue
。
var $table = $("#mytable");
$table.find("th").each(function(columnIndex)
{
var oldValue=0, currentValue=0, $elementToMark;
var $trs = $table.find("tr");
$trs.each(function(index, element)
{
var $td = $(this).find("td:eq("+ columnIndex +")");
if ($td.length!=0)
{
currentValue= parseFloat($td.html());
if(currentValue > oldValue)
{
$elementToMark= $td;
oldValue= currentValue;
}
if(index == $trs.length-1)
{
$elementToMark.addClass("highest");
}
}
});
});
var $table = $("#mytable");
$table.find("th").each(function(columnIndex)
{
var oldValue=1000000, currentValue=1000000, $elementToMark;
var $trs = $table.find("tr");
$trs.each(function(index, element)
{
var $td = $(this).find("td:eq("+ columnIndex +")");
if ($td.length!=0)
{
currentValue= parseFloat($td.html());
if(currentValue < oldValue)
{
$elementToMark= $td;
oldValue= currentValue;
}
if(index == $trs.length-1)
{
$elementToMark.addClass("lowest");
}
}
});
})
; ;
This code would allow for a tie among the lowest or highest value. 此代码将允许在最低或最高值之间建立联系。 Sorry... I started playing with it and couldn't help it....
抱歉...我开始玩它了,忍不住了...
var $table = $("#mytable");
$table.find("th").each(function(columnIndex)
{
var oldValue=0, currentValue=0;
var $trs = $table.find("tr");
var highElements = [];
var lowElements = [];
var lowestValue = 99999;
var highestValue = 0;
console.log('new column ' + columnIndex);
$trs.each(function(index, element)
{
oldValue= currentValue;
var cell = $(this).find("td:eq("+ columnIndex +")");
if (cell.length!=0)
{
currentValue= parseInt(cell.html());
if(currentValue < lowestValue)
{
lowestValue = currentValue;
lowElements = [];
lowElements.push(cell);
}
else if (currentValue == lowestValue) {
lowElements.push(cell);
}
if (currentValue > highestValue)
{
highestValue = currentValue;
highElements = [];
highElements.push(cell);
}
else if (currentValue == highestValue) {
highElements.push(cell);
}
}
});
$.each(lowElements, function(i, e){
$(e).addClass('lowest');
});
$.each(highElements, function(i, e){
$(e).addClass('highest');
});
}); });
Hope it helps. 希望能帮助到你。
Working fiddle here... http://jsfiddle.net/vqfPA/6/ 在这里工作的小提琴... http://jsfiddle.net/vqfPA/6/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.