Javascript 如何仅更改最小单元格'；html表格中的颜色

假设我有HTML表格，通过单击，我想更改颜色

我想要的结果是，如果单击

5

和

6

，单元格

5

将变为绿色，其他单元格将变为红色

换句话说，单击的单元格中只有最小数量的单元格将变为绿色

可能吗？有什么办法吗

我的尝试也被打断了

$（函数（）{
$（“td”）。单击（函数（）{
$（此）.addClass（“住院”）；
});
});
。住院治疗{
背景色：红色；
}
.第二次住院{
背景颜色：绿色；
}
运输署{
填充：5px
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
按照此特定顺序，您可以将类“green”添加到具有该类的第一个元素中


$（函数（）{
$（“td”）。单击（函数（）{
$（此）.addClass（“住院”）；
$（“td.住院绿色”）.removeClass（“住院绿色”）；
$（“td.Hospitality”）.first（）.addClass（“住院绿色”）；
});
});
。住院治疗{
背景色：红色；
}
.住院绿色{
背景颜色：绿色；
}
运输署{
填充物：5px；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
按照此特定顺序，您可以将类“green”添加到具有该类的第一个元素中


$（函数（）{
$（“td”）。单击（函数（）{
$（此）.addClass（“住院”）；
$（“td.住院绿色”）.removeClass（“住院绿色”）；
$（“td.Hospitality”）.first（）.addClass（“住院绿色”）；
});
});
。住院治疗{
背景色：红色；
}
.住院绿色{
背景颜色：绿色；
}
运输署{
填充物：5px；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
如果id顺序与html元素顺序不一致
在下面的代码中，单击时将删除类first，以防止每次新单击时类first堆积起来

然后，我们检查哪些单击的元素具有最低的id号。id最低的数字被视为第一个，并将获得第一个类

为确保我们仅在单击的表中选择住院治疗，您可以使用
const parent_table=$（this）.closest（'table'）；
以确保仅更改在中单击的表


$（函数（）{
$（“td”）。单击（函数（）{
$（此）.addClass（“住院”）；
//选择在中单击的表
constparent_table=$（this）.closest（'table'）；
//移除旧的头等舱
$（父表）.find（'.inmediation'）.removeClass（'first'）；
//检查现在哪个元素是第一个元素。
//在本例中，我使用id来定义哪个元素是第一个元素；
const first=$（parent_table）.find（'.inmediation'）.sort（（a，b）=>a.id-b.id）[0]；
//首先将类添加到第一个元素
$（first）.addClass（'first'）；
});
});
。住院治疗{
背景色：红色；
}
.首先{
背景颜色：绿色；
}
运输署{
填充：5px
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
如果id顺序与html元素顺序不一致
在下面的代码中，单击时将删除类first，以防止每次新单击时类first堆积起来

然后，我们检查哪些单击的元素具有最低的id号。id最低的数字被视为第一个，并将获得第一个类

为确保我们仅在单击的表中选择住院治疗，您可以使用
const parent_table=$（this）.closest（'table'）；
以确保仅更改在中单击的表


$（函数（）{
$（“td”）。单击（函数（）{
$（此）.addClass（“住院”）；
//选择在中单击的表
constparent_table=$（this）.closest（'table'）；
//移除旧的头等舱
$（父表）.find（'.inmediation'）.removeClass（'first'）；
//检查现在哪个元素是第一个元素。
//在本例中，我使用id来定义哪个元素是第一个元素；
const first=$（parent_table）.find（'.inmediation'）.sort（（a，b）=>a.id-b.id）[0]；
//首先将类添加到第一个元素
$（first）.addClass（'first'）；
});
});
。住院治疗{
背景色：红色；
}
.首先{
背景颜色：绿色；
}
运输署{
填充：5px
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
这不需要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';
            }
        });
    }
})();


（函数（）{
window.onload=（）=>{
const table=document.body.querySelector（'table'）；
const cells=table.querySelectorAll（'td'）；
table.addEventListener（'click'，（{target}）=>{
if（target.tagName.toLowerCase（）！=='td'）返回；
const minimal=table.querySelector（'.infected_second'）；
如果（！极小）{
target.className='u second'；
回来
}
if（parseInt（target.innerText，10）
这不需要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';
            }
        });
    }
})();