{"id":14122,"date":"2022-10-06T14:28:58","date_gmt":"2022-10-06T08:58:58","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/"},"modified":"2022-10-06T14:28:58","modified_gmt":"2022-10-06T08:58:58","slug":"solved-compare-differences-between-two-tables-using-javascript-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/","title":{"rendered":"[Solved] Compare differences between two tables using Javascript [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

from the DOM table<\/code>, if they are identical(structure), you can make a loop on the TD<\/code>s of one of them and compare textContent<\/code> to the other standing at the same position:<\/p>\n

here is an example<\/p>\n<\/p>\n

\n
\n
const firstTable = document.querySelectorAll(\"#table1 td\");\nconst secondTable = document.querySelectorAll(\"#table2 td\");\n\n\/\/ loop on one of the table if both are of identical structure, else it is pointless\nfor (let i = 0; i < firstTable.length; i++) {\n  if (firstTable[i].textContent !== secondTable[i].textContent) {\n    firstTable[i].classList.add('redbg');\/\/ here do what you need to when not equal\n  }\n  \/\/ else { \/* do what you need to if equal*\/ }\n}<\/code><\/pre>\n
.redbg {\n  background: red;\n}<\/code><\/pre>\n
<table id=\"table1\">\n  <tr>\n    <th>id<\/th>\n    <th>name<\/th>\n    <th>age<\/th>\n  <\/tr>\n  <tr>\n    <td>1<\/td>\n    <td>per<\/td>\n    <td>27<\/td>\n  <\/tr>\n  <tr>\n    <td>2<\/td>\n    <td>Tom<\/td>\n    <td>25<\/td>\n  <\/tr>\n  <tr>\n    <td>notexist<\/td>\n    <td><\/td>\n    <td><\/td>\n  <\/tr>\n<\/table>\n\n<table id=\"table2\">\n  <tr>\n    <th>id<\/th>\n    <th>name<\/th>\n    <th>age<\/th>\n  <\/tr>\n  <tr>\n    <td>1<\/td>\n    <td>per<\/td>\n    <td>25<\/td>\n  <\/tr>\n  <tr>\n    <td>2<\/td>\n    <td>Tom<\/td>\n    <td>25<\/td>\n  <\/tr>\n  <tr>\n    <td>3<\/td>\n    <td>alex<\/td>\n    <td>33<\/td>\n  <\/tr>\n<\/table><\/code><\/pre>\n<\/div>\n<\/div>\n
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.<\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            3<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Compare differences between two tables using Javascript [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] 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 … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346,333,388],"class_list":["post-14122","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html","tag-javascript","tag-jquery"],"yoast_head":"\n[Solved] Compare differences between two tables using Javascript [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Compare differences between two tables using Javascript [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] 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 ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-06T08:58:58+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Compare differences between two tables using Javascript [closed]\",\"datePublished\":\"2022-10-06T08:58:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/\"},\"wordCount\":89,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\",\"javascript\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/\",\"name\":\"[Solved] Compare differences between two tables using Javascript [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-10-06T08:58:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Compare differences between two tables using Javascript [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Compare differences between two tables using Javascript [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Compare differences between two tables using Javascript [closed] - JassWeb","og_description":"[ad_1] 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 ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/","og_site_name":"JassWeb","article_published_time":"2022-10-06T08:58:58+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Compare differences between two tables using Javascript [closed]","datePublished":"2022-10-06T08:58:58+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/"},"wordCount":89,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html","javascript","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/","name":"[Solved] Compare differences between two tables using Javascript [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-06T08:58:58+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-compare-differences-between-two-tables-using-javascript-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Compare differences between two tables using Javascript [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/14122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=14122"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/14122\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=14122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=14122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=14122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}