Подсветка таблицы мин / макс значений jquery - PullRequest
0 голосов
/ 21 марта 2020

У меня есть таблица с некоторыми данными сравнения и выделения. И есть хороший рабочий jQuery скрипт для таблицы. Вот код: https://jsfiddle.net/bo7145907/ypob2vrx/8/

Мне нужно изменить свой сценарий для следующих требований:

  1. Если у меня есть ноль в <td>, текст «км / ч» не должен отображаться. Теперь у меня есть этот код
    <td style="width: 15%">@Model.ElementAt(2).MaxSpeedAt0 km/h</td>
  2. Если у меня есть равные значения в некоторых <td>, нужно выделить их все. Например, в первой строке «1952» во втором столбце выделено зеленым, а «1952» в четвертом столбце не выделено.

1 Ответ

1 голос
/ 21 марта 2020

Попробуйте:

  • для номера 1
if(!/\d/.test($(cell).text()) && j>0) $(cell).text('')
  • для номера 2
if ($(cell).text().replace(/\D/g,'') == min) $(this).addClass("min")
if ($(cell).text().replace(/\D/g,'') == max) $(this).addClass("max")

Вот живое демо:

$(function () {
    function getNum(s) {
        var n = false;
        if (s.length) {
            n = parseInt(s, 10);
        }
        return n;
    }

    function getRowData(t) {
        var r = [],
            n;
        $("td", t).each(function (i, el) {
            n = getNum($(el).text());
            if (i > 0 && n) {
                r.push(n);
            }
        });
        return r;
    }

    $("#PlaneTable tbody tr").each(function (ind, row) {
        const values = getRowData($(row)),
              min = Math.min(...values),
              max = Math.max(...values)
              
        if ($("td", row).eq(0).text() == "Turn time") {
            $(row).addClass("low");
        } else
            if ($("td", row).eq(0).text() == "Take-off weight") {
                $(row).addClass("low");
            }
            else {
                $(row).addClass("high");
            }
        $("td", row).each(function (j, cell) {
            if(!/\d/.test($(cell).text()) && j>0) $(cell).text('')
            if ($(cell).text().replace(/\D/g,'') == min) $(this).addClass("min")
            if ($(cell).text().replace(/\D/g,'') == max) $(this).addClass("max")
        });
    });
});
.high .min{background-color:pink;color:white;}.high .max{background-color:red;color:white;}.low .min{background-color:lightgreen;color:white;}.low .max{background-color:green;color:white;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="PlaneTable"><tr><td style="width: 20%">First flight</td><td style="width: 15%">1949</td><td style="width: 15%">1952</td><td style="width: 15%">1944</td><td style="width: 15%">1952</td><tr><td style="width: 20%">Max speed</td><td style="width: 15%">989 km/h</td><td style="width: 15%">1104 km/h</td><td style="width: 15%">km/h</td><td style="width: 15%">933 km/h</td></tr><tr><td style="width: 20%">Max speed at 5000 m</td><td style="width: 15%">957 km/h</td><td style="width: 15%">1051 km/h</td><td style="width: 15%">888 km/h</td><td style="width: 15%">910 km/h</td></tr><tr><td style="width: 20%">Climb rate</td><td style="width: 15%">119 m/s</td><td style="width: 15%">131 m/s</td><td style="width: 15%">147 m/s</td><td style="width: 15%">145 m/s</td></tr><tr><td style="width: 20%">Turn time</td><td style="width: 15%">27 s</td><td style="width: 15%">24 s</td><td style="width: 15%">24 s</td><td style="width: 15%">26 s</td></tr></table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...