jquery-duplifer.js

A jQuery plugin that highlights duplicate cells in a table using randomly-generated, visually pleasing colors. You may also use your own color generator.

Getting Started

First create an html table that has the class duplifer-highlightdups applied to the th that contains duplicate rows.

<table class="find-duplicates">
		<thead>
			<tr>
				<th>Column 1</th>
				<th>Column 2</th>
				<th class="duplifer-highlightdups">Column 3</th>
			</tr>
		</thead>

		<tbody>
			<tr>
				<td>Test 1</td>
				<td>Test 2</td>
				<td>Test 3</td>
			</tr>

			<tr>
				<td>Test 1</td>
				<td>Test 2</td>
				<td>Test 2</td>
			</tr>

			<tr>
				<td>Test 1</td>
				<td>Test 1</td>
				<td>Test 1</td>
			</tr>

			<tr>
				<td>Test 3</td>
				<td>Test 3</td>
				<td>Test 2</td>
			</tr>

			<tr>
				<td>Test 1</td>
				<td>Test 2</td>
				<td>Test 3</td>
			</tr>

			<tr>
				<td>Test 1</td>
				<td>Test 2</td>
				<td>Test 3</td>
			</tr>
		</tbody>
	</table>

Then call duplifer on the table. That's it.

$(document).ready(function () {
	$(".find-duplicates").duplifer();
});

Options

There are two optional parameters.

colorGenerator

Method to determine the colors that are generated.

Parameter index is the zero-based index of the found duplicate. The first duplicate found is index 0, the second is 1...

By default the colors are randomly generated.

The code below will generate the colors of the rainbow. (The example below will only work for up to 7 duplicates since there are only seven elements in the array. The default color generator supplies random colors.)

$(".find-duplicates").duplifer({
	colorGenerator: function(index){
    	var colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
		return colors[index];
    }
});

highlightClass

Specifies the class name of the th that contains the column to highlight. By default it is duplifer-highlightdups

$(".find-duplicates").duplifer({
	highlightClass: "myClassName"
});