根据值突出显示 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');

        }

    });

});

我想要得到的结果

1. 突出显示是否仅显示最佳值和最差值（而不是介于两者之间）

2. 如果多个单元格中的数据匹配，则也需要突出显示它们

3. 如果没有数据，单元格应该不突出显示

4. 数据应该在一行内进行比较<tr>，因为会有多行

Answer 1

您可以将每行的所有值存储在一个数组中。然后，存储最小值和最大值，最后如果值匹配，则为每个值应用颜色。<td>$("#myPlaneTable tbody tr").each(function () {&nbsp; &nbsp; var values = [];&nbsp; &nbsp; var tds = $(this).find('td');&nbsp; &nbsp; tds.each(function () {&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; if ($.isNumeric($(this).text())) {&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; values.push($(this).text());&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; var min = Math.min.apply(Math, values);&nbsp; &nbsp; var max = Math.max.apply(Math, values);&nbsp; &nbsp; tds.each(function () {&nbsp; &nbsp; &nbsp; if ($(this).text() == min) {&nbsp; &nbsp; &nbsp; &nbsp; $(this).css('backgroundColor', 'red');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if ($(this).text() == max) {&nbsp; &nbsp; &nbsp; &nbsp; $(this).css('backgroundColor', 'green');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});

Answer 2

您必须循环遍历所有表行和表单元格，将它们放在一个数组中，然后比较数字的最低值和最高值。我将为您提供 2 个样式解决方案，第一个（更好的选择）通过单独的 css 文件样式，第二个通过内联 jQuery 样式。这是一个如何解决它的工作示例：&nbsp;https ://jsfiddle.net/efmkr08t/1/$('#myPlaneTable').find('tr').not(':first').each(function(index, tr) {&nbsp; &nbsp; &nbsp; &nbsp; var cols = [];&nbsp; &nbsp; $(tr).find('td').not(':first').each(function(index, td) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($(td).text() === '') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cols[index] = Number($(td).text());&nbsp; &nbsp; });&nbsp; &nbsp; var max = Math.max.apply(null, cols);&nbsp; &nbsp; var min = Math.min.apply(null, cols);&nbsp; &nbsp; $(tr).find('td').not(':first').each(function(index, td) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (Number($(td).text()) === min) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // the way you should use it (styling is via css)&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(td).addClass('min')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // inline css&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // $(td).css('background', 'red');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (Number($(td).text()) === max) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // the way you should use it (styling is via css)&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(td).addClass('max')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // inline css&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // $(td).css('background', 'green');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});