Question 213570 in Html Question posted in
Some basic documentation can be found here.

How to get data from html table by specific <th> then compare <td> 's if matching color it?

I want to color every cell in a HTML table if it has same data in the table, but I want to do this only in a specified column not on the whole table.

BRAND TYPE COLOR BRAND TYPE COLOR
Ford Fiesta white Audi A7 black
Ferrari F40 red Honda Accord silver
Ford Fiesta blue Ford Fiesta yellow

So for the example from above only Fiesta would get a green background in the table because I search only in TYPE columns

For debugging:

<!DOCTYPE html>
<html>
<head>
  <style>
    .green-cell {
      background-color: green;
      color: white;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <th>ind</th>
    <th>NUM</th>
    <th>NAME</th>
    <th>TYPE</th>
    <th>NUM</th>
    <th>NAME</th>
    <th>TYPE</th>
    <th>NUM</th>
    <th>NAME</th>
    <th>TYPE</th>
  </tr>
  <tr>
    <td class="data">0</td>
    <td class="data">FORD</td>
    <td class="data">R39185</td>
    <td class="data">MSOME</td>
    <td class="data">KIA</td>
    <td class="data">K29481</td>
    <td class="data">MSOME</td>
    <td class="data">TOYOTA</td>
    <td class="data">C39259</td>
    <td class="data">MSOME</td>
  </tr>
  <tr>
    <td class="data">1</td>
    <td class="data">FORD</td>
    <td class="data">R39186</td>
    <td class="data">MSOME</td>
    <td class="data">KIA</td>
    <td class="data">R39185</td>
    <td class="data">MSOME</td>
    <td class="data">TOYOTA</td>
    <td class="data">C39260</td>
    <td class="data">MSOME</td>
  </tr>
  <tr>
    <td class="data">2</td>
    <td class="data">FORD</td>
    <td class="data">R39187</td>
    <td class="data">MSOME</td>
    <td class="data">KIA</td>
    <td class="data">K46981</td>
    <td class="data">MSOME</td>
    <td class="data">TOYOTA</td>
    <td class="data">R39185</td>
    <td class="data">MSOME</td>
  </tr>
</table>

<script>
  // Function to color cells with matching values in the "NAME" column
  function colorMatchingCells() {
    const cells = document.getElementsByClassName("data");
    const nameCells = [];

    // Extract "NAME" column values
    for (let i = 2; i < cells.length; i += 10) {
      nameCells.push(cells[i].textContent);
    }

    // Compare and color matching cells
    for (let i = 0; i < cells.length; i += 1) {
      if (nameCells.includes(cells[i].textContent)) {
        cells[i].classList.add("green-cell");
      }
    }
  }

  // Call the function after the page loads
  window.onload = colorMatchingCells;
</script>

</body>
</html>
Tags:

2

Answers


  1. 0

    To color only the cells in a specified column (e.g., the "TYPE" column) if they have the same data, you can modify the JavaScript code to target only the cells in that column.

    <!DOCTYPE html>
<html>
<head>
  <style>
    .green-cell {
      background-color: green;
      color: white;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <th>ind</th>
    <th>NUM</th>
    <th>NAME</th>
    <th class="type-header">TYPE</th>
    <th>NUM</th>
    <th>NAME</th>
    <th class="type-header">TYPE</th>
    <th>NUM</th>
    <th>NAME</th>
    <th class="type-header">TYPE</th>
  </tr>
  <tr>
    <!-- Table data... -->
  </tr>
  <!-- More table rows... -->
</table>

<script>
  // Function to color cells with matching values in the "TYPE" column
  function colorMatchingCells() {
    const typeCells = document.getElementsByClassName("type-header")[0].parentElement.children;
    const typeValues = Array.from(typeCells).map((cell) => cell.textContent);

    // Compare and color matching cells
    for (let i = 0; i < typeCells.length; i++) {
      const typeValue = typeCells[i].textContent;
      for (let j = 0; j < typeCells.length; j++) {
        if (i !== j && typeValue === typeCells[j].textContent) {
          typeCells[j].classList.add("green-cell");
        }
      }
    }
  }

  // Call the function after the page loads
  window.onload = colorMatchingCells;
</script>

</body>
</html>

    In this code, I added a class type-header to the "TYPE" header cell to target the column with the "TYPE" data. Then, I extracted the values of the "TYPE" column into an array typeValues. Next, I looped through each cell in the "TYPE" column and compared it with other cells in the same column. If a match is found, the class "green-cell" is added to color the cell accordingly.

    This way, only the cells in the "TYPE" column that have the same data will be colored with a green background. The rest of the table remains unaffected.

    Hope I helped.

    Login or Signup to reply.
  2. 0

    Replace:

    const cells = document.getElementsByClassName("data");

    With:

    const cells = document.querySelectorAll('td.data:nth-child(4n+4)');

    This will only select the forth td instead of whole data class.

    <!DOCTYPE html>
<html>
<head>
  <style>
    .green-cell {
      background-color: green;
      color: white;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <th>ind</th>
    <th>NUM</th>
    <th>NAME</th>
    <th>TYPE</th>
    <th>NUM</th>
    <th>NAME</th>
    <th>TYPE</th>
    <th>NUM</th>
    <th>NAME</th>
    <th>TYPE</th>
  </tr>
  <tr>
    <td class="data">0</td>
    <td class="data">FORD</td>
    <td class="data">R39185</td>
    <td class="data">MSOME</td>
    <td class="data">KIA</td>
    <td class="data">K29481</td>
    <td class="data">MSOME</td>
    <td class="data">TOYOTA</td>
    <td class="data">C39259</td>
    <td class="data">MSOME</td>
  </tr>
  <tr>
    <td class="data">1</td>
    <td class="data">FORD</td>
    <td class="data">R39186</td>
    <td class="data">MSOME</td>
    <td class="data">KIA</td>
    <td class="data">R39185</td>
    <td class="data">MSOME</td>
    <td class="data">TOYOTA</td>
    <td class="data">C39260</td>
    <td class="data">MSOME</td>
  </tr>
  <tr>
    <td class="data">2</td>
    <td class="data">FORD</td>
    <td class="data">R39187</td>
    <td class="data">MSOME</td>
    <td class="data">KIA</td>
    <td class="data">K46981</td>
    <td class="data">MSOME</td>
    <td class="data">TOYOTA</td>
    <td class="data">R39185</td>
    <td class="data">MSOME</td>
  </tr>
</table>

<script>
  // Function to color cells with matching values in the "NAME" column
  function colorMatchingCells() {
    // const cells = document.getElementsByClassName("data");
    const cells = document.querySelectorAll('td.data:nth-child(4n+4)');
    const nameCells = [];

    // Extract "NAME" column values
    for (let i = 2; i < cells.length; i += 10) {
      nameCells.push(cells[i].textContent);
    }

    // Compare and color matching cells
    for (let i = 0; i < cells.length; i += 1) {
      if (nameCells.includes(cells[i].textContent)) {
        cells[i].classList.add("green-cell");
      }
    }
  }

  // Call the function after the page loads
  window.onload = colorMatchingCells;
</script>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search