Table Cell Diff

README.md

Highlight changed values in the cells of a table's column(s).

Usage:

Add class "diff" to the table and all cells that should be diffed. The script will assign additional classes to the td's existing classes depending on the change:

• 'first' for the initial value (first line)
• 'changed' if value is different from the previous row
• 'unchanged' if value is same as in previous row

  <table class="diff">
    <tr>
      <td>Won't be diffed</td>
      <td class="diff">Will be diffed</td>
    </tr>
  </table>

table_diff.js

$('table.diff').each(function() {
	var prevs = [];
	$(this).find('tr').each(function() {
		var cells = $(this).find('td');

		cells.each(function(i) {
			var cell = $(this);
			if (!cell.hasClass('diff')) {
				return;
			}

			var text = $(this).text();

			if (prevs[i] === undefined) {
				prevs[i] = text;
				status = 'first';
			} else {
				status = (prevs[i] === text ? 'unchanged' : 'changed');
				prevs[i] = text;
			}
			cell.addClass(status);
		});

	});
});