Css needed to highlight common words in a table - css

Question

I came across this page on slate.com that highlights similar words in a table when you hover over one instance:
http://www.slate.com/blogs/lexicon_valley/2013/09/11/top_swear_words_most_popular_curse_words_on_facebook.html
Does anyone know how this is done?

Answer 1

You can do it with jQuery like this:
$('table td').mouseover(function() {
$('table td').removeClass('highlight')
var text = $(this).text();
$('table td').filter(function() { return $(this).text() == text; }).addClass('highlight');
})
Check this jsFiddle

Answer 2

using jQuery.data
Always to know how something works, the first step is to read the source code
Check this:
EXAMPLE
$('.interactive_table .cell_word')
.hover(function(){
var word = $(this).data('word');
$(this).parent().parent()
.find('.word_'+word)
.addClass('highlighted');
},function(){
var word = $(this).data('word');
$(this).parent().parent()
.find('.word_'+word)
.removeClass('highlighted');
});
$('.interactive_table .cell_rank_number')
.hover(function(){
$(this).parent()
.find('.cell_word')
.addClass('highlighted');
},function(){
$(this).parent()
.find('.cell_word')
.removeClass('highlighted');
});