时间戳

首页 > 解决方案 > 如何为html表上同一行具有不同值的行赋予红色？

javascript - 如何为html表上同一行具有不同值的行赋予红色？

问题描述

如何为 HTML 表上同一行具有不同值的行赋予红色？

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

然后给整行红色字体

如果您在所有未更改颜色的单元格上看到具有相同值的行下方。

我需要函数为在同一行上至少有一个值与其他值不同的行赋予红色

所以如何通过jquery或javascript使函数做到这一点，如果有的话，它会为一行做红色

至少不同的单元格值。

行有不同的值给出红色行字体

<!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>

标签： javascriptjquery

解决方案

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

使用 JavaScript：

document.addEventListener('DOMContentLoaded', (event) => {
  var trList = document.querySelectorAll('tr');
  trList.forEach(function(tr){
    var count = [...new Set(Array.from(tr.querySelectorAll('td')).map(i => i.textContent))].length;
    if(count > 1) tr.style.color = 'red';
  });
});
<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>

使用 jQuery：

$(document).ready(function(){
  $('tr').each(function(){
    var count = [...new Set($(this).find('td').map((_,i) => $(i).text()).get())].length;
    if(count > 1) $(this).css('color', 'red');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

推荐阅读