根据值突出显示 HTML 表格单元格 (jQuery)

Question

有一个表格将根据所选的下拉元素进行填充。这是代码（我没有插入带有下拉元素的行）：<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');        }    });});我想要得到的结果突出显示是否仅显示最佳值和最差值（而不是介于两者之间）如果多个单元格中的数据匹配，则也需要突出显示它们如果没有数据，单元格应该不突出显示数据应该在一行内进行比较<tr>，因为会有多行

Answer 1

您可以将每行的所有值存储在一个数组中。然后，存储最小值和最大值，最后如果值匹配，

则为每个值应用颜色。<td>

$("#myPlaneTable tbody tr").each(function () {

    var values = [];

    var tds = $(this).find('td');

    tds.each(function () {   

      if ($.isNumeric($(this).text())) {   

        values.push($(this).text());

      }

    });

    var min = Math.min.apply(Math, values);

    var max = Math.max.apply(Math, values);

    tds.each(function () {

      if ($(this).text() == min) {

        $(this).css('backgroundColor', 'red');

      }

      if ($(this).text() == max) {

        $(this).css('backgroundColor', 'green');

      }

    });

});

Answer 2

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

我将为您提供 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');

        }

    });

});