html根据另一个td值更改td文本颜色

我在表中有100多行，所以它适用于所有行。这里提到的代码和它写的一样完美。但是，需要做一些更改，目前tg-5ma类的颜色正在根据值>400我需要让它与另一个td进行比较；。tg关闭"；如果值为"；。tg-5ma">"；。tg关闭"；则颜色为蓝色，并且如果<然后涂成红色。现在我不知道在哪里以及如何描述下面的另一个类。请帮忙。。。。

$(function() {
$(".tg-5ma").each(function() {
if ($(this).text() > 400) {
$(this).css('color', 'blue')
} else {
$(this).css('color', 'red');
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
td {
border: solid black 1px;
}
</style>
</head>
<body>
<table>
<th> Close</th>
<th> 5ma</th>
<tr>
<td class="tg-close">250</td>
<td class="tg-5ma">150</td>
</tr>
<tr>
<td class="tg-close">550</td>
<td class="tg-5ma">850</td>
</tr>
<tr>
<td class="tg-close">450</td>
<td class="tg-5ma">50</td>
</tr>
<tr>
<td class="tg-close">1112</td>
<td class="tg-5ma">1500</td>
</tr>
<tr>
<td class="tg-close">250</td>
<td class="tg-5ma">150</td>
</tr>
</table>


</body>
</html>

这就是您需要的吗？

if (parseInt($(this).text()) > parseInt($(this).prevAll(".tg-close").text())) {

也请阅读对这篇文章的评论。

https://api.jquery.com/prevAll/

你应该学习树遍历

$(function() {
$(".tg-5ma").each(function() {
if (parseInt($(this).text()) > parseInt($(this).prevAll(".tg-close").text())) {
$(this).css('color', 'blue')
} else {
$(this).css('color', 'red');
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
td {
border: solid black 1px;
}
</style>
</head>
<body>
<table>
<th> Close</th>
<th> 5ma</th>
<tr>
<td class="tg-close">250</td>
<td class="">xx</td>
<td class="">xxx</td>
<td class="tg-5ma">150</td>
</tr>
<tr>
<td class="tg-close">550</td>
<td class="">xx</td>
<td class="">xxx</td>
<td class="tg-5ma">850</td>
</tr>
<tr>
<td class="tg-close">450</td>
<td class="">xx</td>
<td class="">xxx</td>
<td class="tg-5ma">50</td>
</tr>
<tr>
<td class="tg-close">1112</td>
<td class="">xx</td>
<td class="">xxx</td>
<td class="tg-5ma">1500</td>
</tr>
<tr>
<td class="tg-close">250</td>
<td class="">xx</td>
<td class="">xxx</td>
<td class="tg-5ma">150</td>
</tr>
</table>


</body>
</html>

为了完整起见，这里有一个没有jQuery的解决方案：

a=[...document.querySelector("tbody").children].forEach(r=>{
let [a,b]=[...r.children].map(c=>+c.textContent)
r.children[1].style.color=a>b?"red":"blue";
});

td { border: solid black 1px; }

<table>
<thead><tr><th> Close</th><th>5ma</th></tr></thead>
<tbody><tr>
<td class="tg-close">250</td>
<td class="tg-5ma">150</td>
</tr>
<tr>
<td class="tg-close">550</td>
<td class="tg-5ma">850</td>
</tr>
<tr>
<td class="tg-close">450</td>
<td class="tg-5ma">50</td>
</tr>
<tr>
<td class="tg-close">1112</td>
<td class="tg-5ma">1500</td>
</tr>
<tr>
<td class="tg-close">250</td>
<td class="tg-5ma">150</td>
</tr>
</tbody>
</table>

我的解决方案不考虑任何类，而是依赖于列顺序：我比较在第一个tbody中找到的任何<tr>的前两个子元素。

相关内容

最新更新

热门标签：