CODEWITHSUNDEEP
javascriptjquery
ahmed barbary
ahmed barbary

Reputation: 670

How to give red color for rows on html table that have different values on same row?

How to give red color for rows on HTML table that have different values on the same row ?

I need when at least one cell from row different from each other

then give red font to full row

if you see below the row that has the same value on all cells not changed color.

I need function give red color for the row that have at least one value different from others on the same row

so How to make the function do that by jquery or javascript do red color for a row if it has

at least different cell values.

rows have different values give red rows font

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

Upvotes: 1

Views: 3083

Answers (2)

Mamun
Mamun

Reputation: 68933

You can check the length of unique values of td from each tr. If the length is more than one then the values are not same otherwise same.

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

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

Upvotes: 1

Nguyễn Văn Phong
Nguyễn Văn Phong

Reputation: 14208

You can resolve your problem by doing simple this way.

  • Loop each tr then check the text value of each td.
  • If any text is different from the first text, You can turn on the flag name isDiff is true.
  • If isDiff is true, you can css color for the row. 

$( document ).ready(function() {
  MakeColorForDifferentContent();
});

function MakeColorForDifferentContent (){
  $("table tr").each((_, tr) => {
    var tempValue = $($(tr).find('td:first-child')).text();
    var tds = $(tr).find('td:not(:first-child)');
    
    var isDiff = false;
    tds.each((_, td) => {
      if($(td).text() !== tempValue){
        isDiff = true;
        return true;
      } 
    });
    
    if(isDiff)
     $(tr).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>

Upvotes: 1

Related Questions