My Table contains five columns td, with the help of following Code the duplicates are highlighted but in all tds. I need only to highlight duplicate value in td[0] or another td by changing the value in [..]. appreciate if the code is accordingly amended.

function highlightDuplicates(tableId) {
  const table  = document.getElementById(tableId);
  const cells  = table.getElementsByTagName("td");
  const values = {};
  for (let i = 0; i < cells.length; i++) {
    const cell      = cells[i];
    const cellValue = cell.textContent.trim();
    if (values[cellValue]) {
      cell.style.backgroundColor = 'black';
      cell.style.color = 'white';
    } else {
      values[cellValue] = true;
    }
  }
}
highlightDuplicates('myTable');

this highlightDuplicates need to be changed with td number.

My Table contains five columns td, with the help of following Code the duplicates are highlighted but in all tds. I need only to highlight duplicate value in td[0] or another td by changing the value in [..]. appreciate if the code is accordingly amended.

function highlightDuplicates(tableId) {
  const table  = document.getElementById(tableId);
  const cells  = table.getElementsByTagName("td");
  const values = {};
  for (let i = 0; i < cells.length; i++) {
    const cell      = cells[i];
    const cellValue = cell.textContent.trim();
    if (values[cellValue]) {
      cell.style.backgroundColor = 'black';
      cell.style.color = 'white';
    } else {
      values[cellValue] = true;
    }
  }
}
highlightDuplicates('myTable');

this highlightDuplicates need to be changed with td number.

• javascript
• html

• 1 don't understand... you only want to search for duplicates in the first column of tbody[0] of your table? – Mister Jojo Commented yesterday
• The code highlights duplicates in all tds of the table, whereas my need is to highlight it only first td i.e. highlightDuplicates("td")[0] like amendment in code. thanks – M.Rono Commented yesterday
• 2 Be clearer! Do you want to compare only all the TDs in the first column or for each row based on their first column? – Mister Jojo Commented yesterday
• This is a very poorly described issue but it looks to me like you should be holding your data elsewhere and building your table off it rather than iterating the table itself. – pilchard Commented 18 hours ago

1 Answer 1

you should be more efficient by using a Map

highlightDuplicates('my-table')
  ;
function highlightDuplicates( tableId ) {
  const highlight = {backgroundColor:'black', color:'white'}
    ;
  for (let colNum of [1,3])
    {
    let values = new Map();
    document
    .querySelectorAll(`#${tableId} tbody tr>td:nth-of-type(${colNum})`)  
    .forEach( cell => {
      if ( values.has(cell.innerText))
        Object.assign(cell.style, highlight );
      else
        values.set(cell.innerText);
      })
    }
  }

Also

• td.innerText === td.textContent.trim()
• document.querySelectorAll()

demo:

highlightDuplicates('my-table')
  ;
function highlightDuplicates( tableId ) {
  const highlight = {backgroundColor:'black', color:'white'}
    ;
  for (let colNum of [1,3])
    {
    let values = new Map();
    document
    .querySelectorAll(`#${tableId} tbody tr>td:nth-of-type(${colNum})`)  
    .forEach( cell => {
      if ( values.has(cell.innerText))
        Object.assign(cell.style, highlight );
      else
        values.set(cell.innerText);
      })
    }
  }

html  { font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
table { border-collapse : collapse; margin: 2em 1em; }
td    { padding: .2em .8em; border: 1px solid darkblue; }
thead { background-color: #9bbad8; }

<table id="my-table">
  <thead>
    <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
  </thead>
  <tbody>
    <tr><td> James     </td><td> Butt      </td><td> XXXX_4    </td></tr>
    <tr><td> Josephine </td><td> Darakjy   </td><td> Chanay    </td></tr>
    <tr><td> Ben       </td><td> Venere    </td><td> XXXX_3    </td></tr>
    <tr><td> XXXX_1     </td><td> Paprocki </td><td> Feltz     </td></tr>
    <tr><td> Donette   </td><td> Foller    </td><td> scarlet   </td></tr>
    <tr><td> Simona    </td><td> Morasca   </td><td> Chapman   </td></tr>
    <tr><td> XXXX_2    </td><td> Tollner   </td><td> XXXX_5    </td></tr>
    <tr><td> XXXX_2    </td><td> Dilliard  </td><td> Paul      </td></tr>
    <tr><td> Sage      </td><td> Wieser    </td><td> Alan      </td></tr>
    <tr><td> XXXX_1    </td><td> Marrier   </td><td> King      </td></tr>
    <tr><td> XXXX_3    </td><td> Amigon    </td><td> XXXX_4    </td></tr>
    <tr><td> Abel      </td><td> Maclead   </td><td> Florence  </td></tr>
    <tr><td> Kiley     </td><td> Caldarera </td><td> XXXX_5    </td></tr>
  </tbody>
</table>