如何在 html 表格中仅更改最小单元格的颜色答案

【问题标题】：How to change only minimum cell's color in html tables如何在 html 表格中仅更改最小单元格的颜色
【发布时间】：2020-02-26 14:04:25
【问题描述】：

假设我有 HTML 表格，通过点击，我想改变颜色。

我想要的结果是，如果单击5 和6，则单元格5 变为绿色，其他单元格变为红色。

换句话说，只有被点击的单元格中最小的个数会变成绿色

有可能吗？有什么方法吗？

我的尝试也是 sn-pted。

$(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>

【问题讨论】：

如果值总是有序的，你可以这样做$('.hospitalization:first').addClass('green')
为单元格分配一个类名，然后你可以使用 $(".class") 来处理使用该类的所有元素或使用 $("td") 但如果你有 td 则后者是有缺陷的不相关。

标签： javascript jquery html css html-table

【解决方案1】：

如果 id 顺序与 html 元素顺序不同在下面的代码中，点击时类 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>

【讨论】：

解释所提供代码的答案比不解释的答案更少被否决。
我在 atm 添加解释:)
注意：这仅在有 1 个表格时有效，您是否需要一个支持同一页面上的多个表格的示例（因为您询问了表格（复数））？
谢谢，我希望我能看到多个表格的例子，谢谢！
@Heisenberg 编辑了答案以支持多个表

【解决方案2】：

在这个特定的顺序中，您可以将“green”类添加到具有类住院的第一个元素。

$(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>

【讨论】：

谢谢！如果表中没有id 属性，它工作得好吗？我看不到first() 方法机制.. 最好的问候。
是的，它可以在没有 id 属性的情况下工作，因为这是一种基于元素顺序的简单方法，而不是基于属性或内容。 first() 方法选择由 jQuery 选择器创建的列表的第一个元素。

【解决方案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';
            }
        });
    }
})();

【讨论】：