Making the difference of two DOM elements (not two lines) in javascript

Question

This works well for strings: http://ejohn.org/projects/javascript-diff-algorithm/

And I used the line on the server side (in ruby), but it is very difficult to also take into account the structure of the forced tag, as in the tables.

What I did with just the non-html table was too complex a complement to the added and deleted text / inline elements. This method works well until you start trying to split the TD groups.

So, is there a Javascript library there that will generate visual diff with tables?

UPDATE / Example:

Table1: Table 2: <table> <table> <tr> <tr> <td>sometext</td> <td>some <b>text</b></td> <td>moretext</td> <td><b>more text</b></td> </tr> <tr> </table> </table> 

The resulting table (just an opportunity, as there are many ways to show the differences)

 <table> <tr> <td>some<del>text</del><add> <b>text</b></add></td> <td><del>more text</del><add><b>more text</b></add></td> </tr> </table> 

Answer 1

Here is my first attempt. It uses the diff library that you referenced, and assumes the tables are the same size.

 $(document).ready(function() { $("#tbl1 tbody").children("tr").each(function(rownum, tr) { _tr = $("<tr>"); tr2 = $($("#tbl2 tbody tr").get(rownum)); $(tr).children("td").each(function(colnum, td) { text = $(td).html(); text2 = $($(tr2).children("td").get(colnum)).html(); _tr.append("<td>" + diffString(text, text2) + "</td>"); }); $("#results").append(_tr); }); });​ 

http://jsfiddle.net/SPSJb/

Answer 2

I recently implemented https://github.com/teamwork/visual-dom-diff, which compares 2 DOM nodes and generates a DocumentFragment with all the differences enclosed in the <ins> and <del> elements. He believes this may be appropriate for your use case.