Javascript 如何为html表中同一行上具有不同值的行指定红色？_Javascript_Jquery

Javascript 如何为html表中同一行上具有不同值的行指定红色？

javascript jquery

Javascript 如何为html表中同一行上具有不同值的行指定红色？,javascript,jquery,Javascript,Jquery,如何为HTML表中同一行上具有不同值的行指定红色？当行中至少有一个单元格彼此不同时，我需要然后给整行加上红色字体如果在下面看到的行中，所有单元格上的值都相同，则颜色不变我需要函数为至少有一个值不同于同一行上其他值的行指定红色那么，如何让函数通过jquery或javascript实现这一点呢至少有不同的单元格值第一部分第二部分第三部分第四部分 12 12 12 12 12 15 12 12 17 15 13 12 点击我您可以检查每个tr中td唯一值的长度。如果长度超过一

如何为HTML表中同一行上具有不同值的行指定红色？

当行中至少有一个单元格彼此不同时，我需要

然后给整行加上红色字体

如果在下面看到的行中，所有单元格上的值都相同，则颜色不变

我需要函数为至少有一个值不同于同一行上其他值的行指定红色

那么，如何让函数通过jquery或javascript实现这一点呢

至少有不同的单元格值


第一部分
第二部分
第三部分
第四部分
12
12
12
12
12
15
12
12
17
15
13
12
点击我

您可以检查每个tr中td唯一值的长度。如果长度超过一个，则值不相同，否则相同

使用JavaScript:

document.addEventListener（'DOMContentLoaded'，（事件）=>{
var trList=document.querySelectorAll（'tr'）；
trList.forEach（函数（tr）{
var count=[…新集合（Array.from（tr.querySelectorAll（'td'））.map（i=>i.textContent）））.length；
如果（计数>1）tr.style.color='红色'；
});
});

第一部分
第二部分
第三部分
第四部分
12
12
12
12
12
15
12
12
17
15
13
12
单击我
您可以通过这种简单的方式解决您的问题

循环每个tr
，然后检查每个td
的文本值
如果任何文本与第一个文本不同，可以启用标志名称isDiff
is true
如果isDiff
为true，则可以为行设置css
颜色


$（文档）.ready（函数（）{
将颜色设置为不同的内容（）；
});
函数MakeColorForDifferentContent（）{
$（“表tr”）。每个（（表tr）=>{
var tempValue=$（$（tr.find（'td:first child'））.text（）；
var tds=$（tr.find（'td:not（：first child）'）；
var-isDiff=false；
tds.each（u，td）=>{
if（$（td）.text（）！==tempValue）{
isDiff=true；
返回true；
} 
});
如果（isDiff）
$（tr.css（'color'，'red'）；
});
}

第一部分
第二部分
第三部分
第四部分
12
12
12
12
12
15
12
12
17
15
13
12
单击我
谢谢你回复我需要的这个函数，但我需要在加载html时应用这个函数，不使用单击事件，所以如何做我刚刚更新了我的答案。您应该使用$（document）.ready（function（）{
这将在每次重新加载表内容时对任何表动态工作或记录。您应该调用函数MakeColorForDifferentContent（）来应用它。再次检查我的答案。
<!DOCTYPE html>
<html>
<body>
<table border="1">
<col width="500">
<col width="500">
<col width="500">
<col width="500">
<tr bgcolor="#6699FF" width="100%">
    <th>Part1</th>
    <th>Part2</th>
    <th>Part3</th>
    <th>Part4</th>
<tr>
    <td>12</td>
    <td>12</td>
    <td>12</td>
    <td>12</td>
</tr>
<tr>
    <td>12</td>
    <td>15</td>
    <td>12</td>
    <td>12</td>
</tr>
<tr>
    <td>17</td>
    <td>15</td>
    <td>13</td>
    <td>12</td>
</tr>
</table>


<button id="button">Click Me</button>
</body>


</html>