Как изменить только минимальный цвет ячейки в таблицах html

Question

Предположим, у меня есть HTML таблиц и, нажав, я бы хотел изменить цвета.

Мой желаемый результат - если щелкнуть 5 и 6, ячейка 5 станет зеленой и остальные станут красными.

другими словами, только минимальное число среди нажатых клеток станет зеленым

Возможно ли это? Есть ли способ?

Моя попытка также фрагментирована.

$(function() {
  $("td").click(function() {
    $(this).addClass("hospitalization");
  });
});

.hospitalization {
  background-color: red;
}

.hospitalization_second {
  background-color: green;
}

td {
  padding: 5px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td id="1">1</td>
  <td id="2">2</td>
  <td id="3">3</td>
  <td id="4">4</td>
  <td id="5">5</td>
  <td id="6">6</td>
  <td id="7">7</td>
  <td id="8">8</td>
  <td id="9">9</td>
  <td id="10">10</td>
</table>

Answer 1

В случае, если порядок идентификаторов не соответствует порядку элементов html. В приведенном ниже коде класс сначала удаляется при щелчке, чтобы предотвратить накопление класса при каждом новом щелчке.

Затем мы проверяем, какой из нажатых элементов имеет наименьший идентификационный номер. Число с наименьшим идентификатором считается первым и получит первый класс.

Чтобы убедиться, что мы выбираем только госпитализацию из таблицы, по которой щелкнули, вы можете использовать const parent_table = $ (this) .closest (' Таблица'); чтобы убедиться, что вы изменили только таблицу, по которой щелкнули.

$(function() {
  $("td").click(function() {
    $(this).addClass("hospitalization");
    // select the table that was clicked in
    constparent_table = $(this).closest('table');
    // remove the old first class
    $(parent_table).find('.hospitalization').removeClass('first');

    // check which element now is the first element. 
    // In this case I used the id to define which element is first;
    const first = $(parent_table).find('.hospitalization').sort((a, b) => a.id - b.id)[0];

    // add the class first to the first element
    $(first).addClass('first');
  });
});

.hospitalization {
    background-color:red;
}

.hospitalization.first {
    background-color:green;
}

td {
  padding:5px
  }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <table>
        <td id="1">1</td>
        <td id="2">2</td>
        <td id="3">3</td>
        <td id="4">4</td>
        <td id="5">5</td>
        <td id="6">6</td>
        <td id="7">7</td>
        <td id="8">8</td>
        <td id="9">9</td>
        <td id="10">10</td>
        </table>
        <table>
        <td id="11">11</td>
        <td id="12">12</td>
        <td id="13">13</td>
        <td id="14">14</td>
        <td id="15">15</td>
        <td id="16">16</td>
        <td id="17">17</td>
        <td id="18">18</td>
        <td id="19">19</td>
        <td id="20">20</td>
        </table>

Answer 2

В этом конкретном порядке вы можете добавить класс «зеленый» к первому элементу, который имеет класс госпитализации.

$(function() {
  $("td").click(function() {
    $(this).addClass("hospitalization");
    $("td.hospitalization-green").removeClass("hospitalization-green");
    $("td.hospitalization").first().addClass("hospitalization-green");
  });
});

.hospitalization {
  background-color: red;
}
.hospitalization-green {
  background-color: green;
}
td {
  padding:5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td id="1">1</td>
  <td id="2">2</td>
  <td id="3">3</td>
  <td id="4">4</td>
  <td id="5">5</td>
  <td id="6">6</td>
  <td id="7">7</td>
  <td id="8">8</td>
  <td id="9">9</td>
  <td id="10">10</td>
</table>

Answer 3

Вам не нужно jQuery для этого. Вот версия JS, предполагающая структуру, которую вы упомянули:

(function() {
    window.onload = () => {
        const table = document.body.querySelector('table');
        const cells = table.querySelectorAll('td');

        table.addEventListener('click', ({target}) => {
            if (target.tagName.toLowerCase() !== 'td') return;

            const minimal = table.querySelector('.hospitalized_second');

            if(!minimal) {
                target.className = 'hospitalized_second';
                return;
            }

            if (parseInt(target.innerText, 10) < parseInt(minimal.innerText, 10)) {
                minimal.className = 'hospitalized';
                target.className = 'hospitalized_second';
            } else {
                target.className = 'hospitalized';
            }
        });
    }
})();