如何比较html表的两列值并用颜色突出显示不匹配的数据？

Question

This is my html table. I want to highlight the unmatched data with color. I have written javascript for that but it works only for the first row. It's not working for the remaining rows. Please help me about this logic.

sample output Image:

 highlight($("#new"), $("#old")); function highlight(newElem, oldElem) { var newText = newElem.text(); var oldText = oldElem.text(); var text = ""; newElem.text().split("").forEach(function(value, index) { if (value != oldText.charAt(index)) text += "<span class='highlight'>" + value + "</span>"; else text += value; }); newElem.html(text); }

 .highlight { color: red; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tdata"> <tr class="tvalue"> <th>S.No</th> <th>VALUE1</th> <th>VALUE2</th> </tr> <tr class="tvalue"> <td>1</td> <td id="old">this is veerendar</td> <td id="new">this is vearander</td> </tr> <tr class="tvalue"> <td>2</td> <td id="old">123456789</td> <td id="new">124353789</td> </tr> <tr class="tvalue"> <td>3</td> <td id="old">12 34 56 78 32 45</td> <td id="new">34 23 56 79 32 46</td> </tr> <tr class="tvalue"> <td>4</td> <td id="old">ab cd ef sd ef wd</td> <td id="new">bc er ef sd ef we</td> </tr> </table>

Answer 1

Thanks for sharing this code snippet. It really helped me. I tried this and it worked for me. The changes I had to make were add a number at the end of id or class whatever you are using. Since my page was generated from a script I didn't have any problem adding a number at the end.

 $( ".tvalue" ).each(function( i ) { highlight($("#new"+i), $("#old"+i)); }); function highlight(newElem, oldElem) { var newText = newElem.text(); var oldText = oldElem.text(); var text = ""; newElem.text().split("").forEach(function(value, index) { if (value != oldText.charAt(index)) text += "<span class='highlight'>" + value + "</span>"; else text += value; }); newElem.html(text); }

 .highlight { color: red; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tdata"> <tr class="tvalue"> <th>S.No</th> <th>VALUE1</th> <th>VALUE2</th> </tr> <tr class="tvalue"> <td>1</td> <td id="old1">this is veerendar</td> <td id="new1">this is vearander</td> </tr> <tr class="tvalue"> <td>2</td> <td id="old2">123456789</td> <td id="new2">124353789</td> </tr> <tr class="tvalue"> <td>3</td> <td id="old3">12 34 56 78 32 45</td> <td id="new3">34 23 56 79 32 46</td> </tr> <tr class="tvalue"> <td>4</td> <td id="old4">ab cd ef sd ef wd</td> <td id="new4">bc er ef sd ef we</td> </tr> </table>

enter image description here