JSFiddle - React, Tailwind, and code Playground
HTML
<table class="interactive_table"><tbody><tr><td></td><td class="interactive_table_header">Both</td><td class="interactive_table_header">Male</td><td class="interactive_table_header">Female</td></tr><tr>
<td class="cell_rank_number">1</td><td class="cell_word word_shit" data-word="shit">shit</td><td class="cell_word word_shit" data-word="shit">shit</td><td class="cell_word word_shit" data-word="shit">shit</td></tr><tr>
<td class="cell_rank_number">2</td><td class="cell_word word_fuck" data-word="fuck">fuck</td><td class="cell_word word_fuck" data-word="fuck">fuck</td><td class="cell_word word_fuck" data-word="fuck">fuck</td></tr><tr>
<td class="cell_rank_number">3</td><td class="cell_word word_damn" data-word="damn">damn</td><td class="cell_word word_damn" data-word="damn">damn</td><td class="cell_word word_damn" data-word="damn">damn</td></tr><tr>
<td class="cell_rank_number">4</td><td class="cell_word word_bitch" data-word="bitch">bitch</td><td class="cell_word word_bitch" data-word="bitch">bitch</td><td class="cell_word word_bitch" data-word="bitch">bitch</td></tr><tr>
<td class="cell_rank_number">5</td><td class="cell_word word_crap" data-word="crap">crap</td><td class="cell_word word_crap" data-word="crap">crap</td><td class="cell_word word_crap" data-word="crap">crap</td></tr><tr>
<td class="cell_rank_number">6</td><td class="cell_word word_piss" data-word="piss">piss</td><td class="cell_word word_dick" data-word="dick">dick</td><td class="cell_word word_piss" data-word="piss">piss</td></tr><tr>
<td class="cell_rank_number">7</td><td class="cell_word word_dick" data-word="dick">dick</td><td class="cell_word word_piss" data-word="piss">piss</td><td class="cell_word word_darn" data-word="darn">darn</td></tr><tr>
<td class="cell_rank_number">8</td><td class="cell_word word_darn" data-word="darn">darn</td><td class="cell_word word_pussy" data-word="pussy">pussy</td><td class="cell_word word_dick" data-word="dick">dick</td></tr><tr>
<td...
CSS
.interactive_table {
margin: 0px;
width: 550px;
border-collapse: collapse;
border-spacing: 0;
}
.highlighted {
background: red;
}
JavaScript
$('.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');
});