如何僅更改 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

如果 id 順序與 html 元素順序不相同 在下面的代碼中，單擊時將首先刪除 class first，以防止每次新單擊時 class first 堆積。

然后我們檢查哪個被點擊的元素具有最低的 id 號。 id 最小的數字被認為是第一個，將獲得第一類。

為了確保我們只在點擊表中選擇住院，您可以使用 const parent_table = $(this).closest('table'); 以確保您只更改點擊的表格。

 $(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';
            }
        });
    }
})();