Css needed to highlight common words in a table

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?

Take a look to this post http://stackoverflow.com/questions/119441/highlight-a-word-with-jquery — David, Sep 12 '13 at 12:18

Tomzan · Answer 1 · 2013-09-12T12:27:53.867

0

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

edited Sep 12 '13 at 12:27

answered Sep 12 '13 at 12:21

Tomzan

2,808
14
25

This would work for the whole bunch of words not every single one. – Itay Sep 12 '13 at 12:22

Diego · Answer 2 · 2013-09-12T12:37:23.243

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');
});

Css needed to highlight common words in a table

2 Answers2