根据鼠标悬停突出显示表数据

Question

I have multiple list item and table data as per my snippet code. I want to highlight the td when mouse-over based on my list. Currently I did for only one list manually. I want to highlight every td based on list selection.

 $('.list1').mouseenter(function(){ $('.listdiv1').addClass('bg'); }).mouseleave(function() { $('.listdiv1').removeClass('bg'); }); 

 table { border-collapse:collapse; } td { border:1px solid; } .bg { background:red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="list1">List 1</li> <li class="list2">List 2</li> <li class="list3">List 3</li> <li class="list4">List 4</li> </ul> <table> <tr> <td>None</td> <td class="listdiv1">List 1</td> </tr> <tr> <td>None</td> <td class="list2">List 2</td> </tr> <tr> <td>None</td> <td class="list3">List 3</td> </tr> <tr> <td>None</td> <td class="list4">List 4</td> </tr> </table> 

Answer 1

Try like this.

 $('.dblmenu li').mouseenter(function(){ debugger; var clsNm =$(this).attr('class').split(' ').slice(-1); $('td.'+clsNm+'div').addClass('bg'); }).mouseleave(function() { debugger; var clsNm =$(this).attr('class').split(' ').slice(-1); $('td.'+clsNm+'div').removeClass('bg'); }); 

 table { border-collapse:collapse; } td { border:1px solid; } .bg { background:red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="dblmenu"> <li class="accepted list1">List 1</li> <li class="list2">List 2</li> <li class="list3">List 3</li> <li class="list4">List 4</li> </ul> <table> <tr> <td>None</td> <td class="list1div">List 1</td> </tr> <tr> <td>None</td> <td class="list2div">List 2</td> </tr> <tr> <td>None</td> <td class="list3div">List 3</td> </tr> <tr> <td>None</td> <td class="list4div">List 4</td> </tr> </table> 

Answer 2

 var listItems = $('ul li'); $.each( listItems , function() { $(this).mouseenter(function(){ varclassSelected = $(this).attr('class'); $('table tr td').each(function (index, value) { var matchClass = $(this).attr('class'); if (matchClass === varclassSelected) { $(this).addClass('bg'); } }); }).mouseleave(function(){ $('table tr td').removeClass('bg'); }) }); 

 ul li:hover { cursor: pointer; } table { border-collapse:collapse; } td { border:1px solid; } .bg { background:red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="list1">List 1</li> <li class="list2">List 2</li> <li class="list3">List 3</li> <li class="list4">List 4</li> </ul> <table> <tr> <td>None</td> <td class="list1">List 1</td> </tr> <tr> <td>None</td> <td class="list2">List 2</td> </tr> <tr> <td>None</td> <td class="list3">List 3</td> </tr> <tr> <td>None</td> <td class="list4">List 4</td> </tr> </table> 

Please have a look, solution to your problem.

Answer 3

Does this fix your problem by adding :hover on tr:

 table { border-collapse:collapse; } td { border:1px solid; } tr:hover { background-color: red; } .bg { background:red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="list1">List 1</li> <li class="list2">List 2</li> <li class="list3">List 3</li> <li class="list4">List 4</li> </ul> <table> <tr> <td>None</td> <td class="listdiv1">List 1</td> </tr> <tr> <td>None</td> <td class="list2">List 2</td> </tr> <tr> <td>None</td> <td class="list3">List 3</td> </tr> <tr> <td>None</td> <td class="list4">List 4</td> </tr> </table>