javascript - 在 HTML 表格中标记最高和最低值

标签 javascript jquery html

我有一个 HTML 表格,我想通过向每列的最高值和最低值添加一个类来标记单元格。我在这里找到了一些相关的问题,但代码行为不当。

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

这里还有一个 JSFiddle:Link

问题是它没有标记正确的值,我看不到原因。

最佳答案

您在错误的位置更新了 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"); 
                }
            }
            });
    })

;

关于javascript - 在 HTML 表格中标记最高和最低值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24452581/

相关文章:

javascript - 隐藏显示不适用于多个 div

javascript - 将 float 转换为至少保留一位小数的字符串(javascript)

javascript - 带有图像 slider 的 Div 仅在 Safari 中不继承高度

javascript - 限制 Metro-ui datetimepicker 中的过去日期

jquery - $.click 未在带有 JQuery 1.9.1 的 Chrome 中触发复选框

HTML5 验证器.w3.org

html - 具有灵活滚动溢出的两列

html - 如何在CSS中选择当前打开的链接?

javascript - 如何让代码在出错后继续执行 [JS]

javascript - 根据浏览器大小调整图像大小