Highlight duplicate values in table column

App Development
3

Hey @nazdeb, here’s a quick video demo on how to set this up using some JavaScript code: Loom | Free Screen & Video Recording Software | Loom

JavaScript

$.fn.duplifer = function (options)
{
	var settings = $.extend({
		colorGenerator: function (index)
		{
			var r = (Math.round(Math.random() * 127) + 127).toString(16);
			var g = (Math.round(Math.random() * 127) + 127).toString(16);
			var b = (Math.round(Math.random() * 127) + 127).toString(16);
		    console.log('#' + r + g + b);
			return '#' + r + g + b;
		},
		highlightClass: "duplifer-highlightdups"
	}, options);
	
	var cell_index = this.find("thead tr").find("th." + settings.highlightClass).index();
	var row_tds = $("tr td:nth-child(" + (cell_index + 1) + ")")
	var row_values = row_tds.map(function () {
			return $(this).html();
		}).get();
		
	var duplicates = row_values.filter(function (value, index) {
			return row_values.lastIndexOf(value) == index && row_values.indexOf(value) != index;
		});
		
	$(duplicates).each(function (duplicates_index) {
		const filter = row_tds.filter(function () {
			return $(this).html() == duplicates[duplicates_index];
		});
		console.log(filter);
		filter.css("background-color", settings.colorGenerator(duplicates_index));
	});
};
TB.render('component_ID', function(data) {
    $('table').find("thead tr").find("th:nth-child(1)").addClass('duplifer-highlightdups');
	$("table").duplifer();
});
1 Like