<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>
$("input[type=button]").click(function () {
$("#wrapper tr").prettyTextDiff({
cleanup: $("#cleanup").is(":checked")
});
});
External resources loaded into this fiddle:
ins {
background-color: #c6ffc6;
text-decoration: none;
}
del {
background-color: #ffc6c6;
}
div, table, h3, input, label {
margin: 10px;
}
table th {
width: 30%;
}