CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Saravana
Saravana

Reputation: 3496

Highlight table data based on list mouse over

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>

Upvotes: 2

Views: 61

Answers (3)

Syed mohamed aladeen
Syed mohamed aladeen

Reputation: 6755

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>

Upvotes: 3

Ifrah
Ifrah

Reputation: 144

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.

Upvotes: 1

asobak
asobak

Reputation: 329

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>

Upvotes: 0

Related Questions