To effectively compare these tables, first by value and identify any differences. If a match does not exist, indicate that as well. Take a look at the attached image for reference. The second table contains two individuals with identical information but different ages, whereas the first table has one individual matching the details in the second table. It is crucial to highlight the non-existent entry in the first table. The end result should mirror the visual representation shown in the image: https://i.sstatic.net/qVTrM.jpg
const firstArr = [
{ partNo: '1',name: 'Per', age: '35'},
{ partNo: '3',name: 'Tom', age: '27'},
{partNo: '6', name: 'Alex',age: '18'}
]
const secondArr = [
{ partNo: '1', name: 'Per', age: '33'},
{ partNo: '3', name: 'Tom', age: '27'},
{ partNo: '6', name: 'Alex', age: '18'},
{ partNo: '6', name: 'Alex', age: '22'}
]
let table1 = `<table><tr><th>PartNo</th><th>Name</th><th>Age</th></tr>`
let table2 = `<table><tr><th>PartNo</th><th>Name</th><th>Age</th></tr>`
for (let i = 0; i < firstArr.length; i++) {
for (let j = 0; j < secondArr.length; j++) {
table1 += `<tr><td>${firstArr[i].partNo}</td><td>${firstArr[i].name}</td><td>${firstArr[i].age}</td></tr>`
table2 += `<tr><td>${secondArr[j].partNo}</td><td>${secondArr[j].name}</td><td>${secondArr[j].age}</td></tr>`
}
}
table1 += `</table>`
table2 += `</table>`
document.getElementById('firstTable').innerHTML = table1
document.getElementById('secondTable').innerHTML = table2<div style="display: flex;">
<div id="firstTable"></div>
<div>''''''''</div>
<div id="secondTable"></div>
</div>