javascript - Catch mousve hover on text and highlight related value -

javascript - Catch mousve hover on text and highlight related value -

if @ attached image, in sec table, when cursor moves cell contains 4, correspond text in first table highlighted. managed acheive using hover function :

///////////////////////////////////////////////////////////// function hightlighttable1() { // 0 $(".t1_h_x0").hover( function () { $(this).css("background-color", "yellow"); $(".t1_t_x0").css("background-color", "yellow"); }, function () { $(this).css("background-color", "white"); $(".t1_t_x0").css("background-color", "white"); } ); // 1 $(".t1_h_x1").hover( function () { $(this).css("background-color", "yellow"); $(".t1_t_x1").css("background-color", "yellow"); }, function () { $(this).css("background-color", "white"); $(".t1_t_x1").css("background-color", "white"); } ); // , maintain adding code here if there more tables }

this lead alot of html code also, example, first table :

now i'm re-designing site, , came wonder there more efficient way accomplish this?

link site if want take

you simplify code giving cells hovered same class name , utilize cells text build query adress right spans this:

$(".hovercell").hover( function () { $(this).css("background-color", "yellow"); $(".t1_t_x"+$(this).text()).css("background-color", "yellow"); }, function () { $(this).css("background-color", "white"); $(".t1_t_x"+$(this).text()).css("background-color", "white"); } );

jsfiddle: http://jsfiddle.net/markai/o3arj251/

javascript text hover highlight