CODEWITHSUNDEEP
jqueryhtmlcss
KKA
KKA

Reputation: 191

jquery mouseover how to get current hidden value using

I have the below html. My target is to highlight the table rows of same hidden values on mouseover event. Meaning when I mouse over on first row or third row, both first and third should be highlighted based on the hidden value which in this case is "cus1". So far I have managed to highlight only the current table row. Can anyone give solution for this. Below are my details:

HTML:

<table id="tab1">
<tr>
    <td id="id1" >name1</td>
    <td id="id2" >acc1 </td>
    <td id="id3" ><input type="hidden" id="cus1" name="cus1" value="cus1" /></td>
 </tr>
 <tr>
    <td id="id4" >name2</td>
    <td id="id5" >acc2 </td>
    <td id="id6" ><input type="hidden" id="cus2" name="cus2" value="cus2" /></td>
 </tr>
 <tr>
    <td id="id7" >name1</td>
    <td id="id8" >acc3 </td>
    <td id="id9" ><input type="hidden" id="cus3" name="cus1" value="cus1" /></td>
 </tr>
 </table>

jQuery:

$(document).ready(function(){
  $('td').live('mouseover', function(){
    $(this).parent().addClass('hover');
  }).live('mouseout', function(){
    $(this).parent().removeClass('hover');
  });
});

CSS:

.hover {
  background-color: cornflowerblue;
}

Upvotes: 0

Views: 980

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$(document).ready(function(){
    $(document).on('mouseover', 'tr', function(){
        var $this = $(this), val  = $this.find('input:hidden').val();
        $this.siblings(':has(input[value="' + val + '"]:hidden)').addBack().addClass('hover');
    }).on('mouseout', 'tr', function(){
        var $this = $(this), val  = $this.find('input:hidden').val();
        $this.siblings(':has(input[value="' + val + '"]:hidden)').addBack().removeClass('hover');
    });
});

Demo: Fiddle

Upvotes: 3

Related Questions