时间戳

首页 > 解决方案 > 根据值突出显示 HTML 表格单元格（jQuery）

javascript - 根据值突出显示 HTML 表格单元格（jQuery）

问题描述

有一个表格将根据所选的下拉元素填充。这是代码（我没有插入带有下拉元素的行）：

<table id="myPlaneTable" class="table table-bordered">
    <tr>
        <td style="width: 20%">Max speed</td>
        <td style="width: 15%">450</td>
        <td style="width: 15%">487</td>
        <td style="width: 15%">450</td>
        <td style="width: 15%">600</td>
    </tr>

    <tr>
        <td style="width: 20%">Max speed</td>
        <td style="width: 15%">580</td>
        <td style="width: 15%">490</td>
        <td style="width: 15%">543</td>
        <td style="width: 15%">742</td>
    </tr>
</table

这是它的样子在此处输入图像描述

由于我刚开始学习jQuery，所以我尝试了以下代码，但它不起作用

$("#myPlaneTable tbody tr.data-in-table").each(function () {
    $(this).find('td').each(function (index) {
        var currentCell = $(this);
        var nextCell = $(this).next('td').length > 0 ? $(this).next('td') : null;
        if (index%2==0&&nextCell && currentCell.text() !== nextCell.text()) {
            currentCell.css('backgroundColor', 'red');
            nextCell.css('backgroundColor', 'green');
        }
    });
});

我试图得到的结果在此处输入图像的描述

  1. 仅突出显示最佳值和最差值（不在两者之间）
  2. 如果数据在多个单元格中匹配，则也需要突出显示它们
  3. 如果没有数据，单元格应该没有高亮
  4. 数据应该在一行内比较<tr>，因为会有几行

标签： javascriptjqueryhtmlbootstrap-4

解决方案

您必须遍历所有表格行和表格单元格，将它们放在一个数组中，然后比较最低和最高的数字。

我将为您提供 2 个样式解决方案，第一个（更好的选择）通过单独的 css 文件样式，第二个通过内联 jQuery 样式。

这是一个如何解决它的工作示例： https ://jsfiddle.net/efmkr08t/1/

$('#myPlaneTable').find('tr').not(':first').each(function(index, tr) {
        var cols = [];
    $(tr).find('td').not(':first').each(function(index, td) {
            if ($(td).text() === '') {
                return;
            }
            cols[index] = Number($(td).text());
    });
    var max = Math.max.apply(null, cols);
    var min = Math.min.apply(null, cols);

    $(tr).find('td').not(':first').each(function(index, td) {
            if (Number($(td).text()) === min) {
            // the way you should use it (styling is via css)   
               $(td).addClass('min')

            // inline css
            // $(td).css('background', 'red');
        }

        if (Number($(td).text()) === max) {
            // the way you should use it (styling is via css)   
              $(td).addClass('max')

            // inline css
            // $(td).css('background', 'green');
        }
    });
});

推荐阅读