CODEWITHSUNDEEP
jqueryhover
Marc
Marc

Reputation: 9527

Jquery Hide table row on hover

I have a div containing li's and a div containing a table. When there is a hover on a li I want the "system" to take the "refSortie" attribute and hide the table rows for which the "refDate" attribute equals the "refSortie" attribute. My code is not working. Hope someone can help. Thank you in advance for your replies. Cheers. Marc.

My HTML :

<div id="contentWrapper">
    <div id="contentOne" class="content">
        <ul>
            <li refSortie="mmm">MMMMM</li>
            <li refSortie="sss">SSSSS</li>
            <li refSortie="mmm">MMMMM</li>
            <li refSortie="ppp">PPPPP</li>
        </ul>
    </div>

    <div id="contentTwo" class="content">
        <table>
            <tr refDate="mmm"><td>MMMMM</td><td>hdqjkhs</td><td>hdqjkhs</td></tr>
            <tr refDate="mmm"><td>MMMMM</td><td>hdqjkhs</td><td>hdqjkhs</td></tr>
            <tr refDate="ppp"><td>PPPPP</td><td>hdqjkhs</td><td>hdqjkhs</td></tr>
            <tr refDate="sss"><td>SSSSS</td><td>hdqjkhs</td><td>hdqjkhs</td></tr>
        </table>
    </div>
    <div id="contentThree" class="content"></div>
    <div id="contentFour" class="content"></div>
</div>

My JS :

$('#contentOne li').hover(function(){
    var refSortie=$(this).attr('refSortie');

    if(!$('#contentOne').hasClass('freezed')){
        $('#contentTwo table tr[refDate=refSortie]').css("display":"none");}
}).mouseout(function(){
    if(!$('#contentOne').hasClass('freezed')){
        $('#contentTwo table tr[refDate=refSortie]').css("display":"inline");}    
});

Upvotes: 0

Views: 515

Answers (4)

Brent Anderson
Brent Anderson

Reputation: 966

You have a multitude of things going on here. Fixed js code: http://jsfiddle.net/brentmn/cRJdz/

$('#contentOne li').hover(function() {
    var refSortie = $(this).attr('refSortie');

    if (!$('#contentOne').hasClass('freezed')) {
        $('#contentTwo table tr[refDate!=' + refSortie + ']').css("display", "none");
    }
}).mouseout(function() {
    var refSortie = $(this).attr('refSortie');
    if (!$('#contentOne').hasClass('freezed')) {
        $('#contentTwo table tr').css("display", "inline");
    }
});

The errors were: refDate=refSortie //needs to be variable css("display":"inline") // if you want to set css this way, you must use an obj e.g. css({"display": "inline"})

Upvotes: 2

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Fixed a bunch of issues. DEMO here

  1. You can use hover for both mouse enter and mouse leave. Read here
  2. The refSortie is a variable and so it has to be appended to the selector as a string. $('#contentTwo table tr[refDate="' + refSortie +'"]')
  3. refSortie not initialized in the mouse out handler.
  4. .css function takes an associative array (.css({"color":"red"}) )or a single style separated by comma (.css("color","red")).
  5. changed .css({"display","inline"}); to .css({"display","block"}); because it is a table.

See code below, 

    $('#contentOne li').hover(function() {
      var refSortie = $(this).attr('refSortie');

      if (!$('#contentOne').hasClass('freezed')) {
        $('#contentTwo table tr[refDate="' + refSortie +'"]').css({"display": "none"});
      }
     }, function() {
        var refSortie = $(this).attr('refSortie');
        if (!$('#contentOne').hasClass('freezed')) {
           $('#contentTwo table tr[refDate="' + refSortie + '"]').css({"display": "block"});
        }
     });

Upvotes: 1

Kyle Macey
Kyle Macey

Reputation: 8154

Your variable is in quotes. Need to concatenate. 

$('#contentTwo table tr[refDate=' + refSortie + ']')

Upvotes: 0

j08691
j08691

Reputation: 207901

$('#contentOne li').hover(function(){
    $('#contentTwo tr[refDate='+$(this).attr('refSortie')+']').hide();
});

Upvotes: 0

Related Questions