$("input[type=button]").click(function () { $("#wrapper tr").prettyTextDiff({ cleanup: $("#cleanup").is(":checked") }); });
<div id="wrapper"> <h3> Demo of <a href="https://github.com/arnab/jQuery.PrettyTextDiff" target="_blank"> jQuery.PrettyTextDiff </a> </h3> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>Original</th> <th>Changed</th> <th>Diff</th> </tr> </thead> <tbody> <tr> <td class="original">This si text 1</td> <td class="changed">This is text one</td> <td class="diff"></td> </tr> <tr> <td class="original">Today is Jan the 24th, 2013</td> <td class="changed">Today is January the 25th of the year 2013</td> <td class="diff"></td> </tr> <tr> <td class="original">A mouse is here</td> <td class="changed">A sofa is here</td> <td class="diff"></td> </tr> </tbody> </table> <div> <label class="checkbox"> <input id="cleanup" type="checkbox" value="true" checked="checked" /> Clean up diff - read more about <code>diff_cleanupEfficiency</code> <a href="http://code.google.com/p/google-diff-match-patch/wiki/API" target="_blank"> here </a> </label> <input type='button' class='btn btn-primary' value='Diff'></input> </div> <div> <small> More documentation available <a href="https://github.com/arnab/jQuery.PrettyTextDiff#documentation" target="_blank"> here </a> </small> </div> </div>
ins { background-color: #c6ffc6; text-decoration: none; } del { background-color: #ffc6c6; } div, table, h3, input, label { margin: 10px; } table th { width: 30%; }