[Solved] Compare differences between two tables using Javascript [closed]

by


from the DOM table, if they are identical(structure), you can make a loop on the TDs of one of them and compare textContent to the other standing at the same position:

here is an example

const firstTable = document.querySelectorAll("#table1 td");
const secondTable = document.querySelectorAll("#table2 td");

// loop on one of the table if both are of identical structure, else it is pointless
for (let i = 0; i < firstTable.length; i++) {
  if (firstTable[i].textContent !== secondTable[i].textContent) {
    firstTable[i].classList.add('redbg');// here do what you need to when not equal
  }
  // else { /* do what you need to if equal*/ }
}
.redbg {
  background: red;
}
<table id="table1">
  <tr>
    <th>id</th>
    <th>name</th>
    <th>age</th>
  </tr>
  <tr>
    <td>1</td>
    <td>per</td>
    <td>27</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Tom</td>
    <td>25</td>
  </tr>
  <tr>
    <td>notexist</td>
    <td></td>
    <td></td>
  </tr>
</table>

<table id="table2">
  <tr>
    <th>id</th>
    <th>name</th>
    <th>age</th>
  </tr>
  <tr>
    <td>1</td>
    <td>per</td>
    <td>25</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Tom</td>
    <td>25</td>
  </tr>
  <tr>
    <td>3</td>
    <td>alex</td>
    <td>33</td>
  </tr>
</table>

from your array, idea can be the same loop on the first one and check if firstone and second got the same content at the same position, and add the class while building the table.

3

solved Compare differences between two tables using Javascript [closed]