Demo of jQuery.PrettyTextDiff

https://github.com/arnab/jQuery.PrettyTextDiff

HTML

<script src="http://google-diff-match-patch.googlecode.com/svn/trunk/javascript/diff_match_patch.js"></script>
<script src="https://rawgit.com/shikher/jQuery.PrettyTextDiff/01222bca2a130133168dd43c9c289322f7ed9e20/jquery.pretty-text-diff.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
	<div class="marginTop tabularBox tabularBoxTitle" id="animaUpdateTable">
		<header>
			&nbsp;
		</header>
			<table class="table">
				<thead>
					<tr>
						<th class="columnName">{lang}cafeanime.anime.updateOriginal{/lang}</th>
						<th class="columnName">{lang}cafeanime.anime.updateChange{/lang}</th>
					</tr>
				</thead>

				<tbody>
					<tr>
						<td class="columnText updateOriginal" style="width: 50%;">
							Dog Days''
						</td>
						<td class="columnText updateChange" style="width: 50%;">
							Dog Days'' New
						</td>
					</tr>
				</tbody>
			</table>
	</div>

SCSS

ins {
    background-color: #c6ffc6;
    text-decoration: none;
}

del {
    background-color: #ffc6c6;
}

div, table, h3, input, label {
    margin: 10px;
}

table th {
    width: 30%;
}

JavaScript

$("#animaUpdateTable tr").prettyTextDiff({
				originalContainer: ".updateOriginal",
				changedContainer: ".updateChange",
				diffContainer: ".updateChange"
    });