CODEWITHSUNDEEP
jquery
Karem
Karem

Reputation: 18123

Show class on input fields focus within a tr

Structure is:

<tr>
   <td><span id="smeal-12-12" class="sletindtastningfelt">X</span></td>
   <td><input type="text" value="blabla"></td>
   <td><input type="text" value="blabla"></td>
   <td><input type="text" value="blabla"></td>
   <td><input type="text" value="blabla"></td>
</tr>
<tr>
   <td><span id="smeal-13-12" class="sletindtastningfelt">X</span></td>
   <td><input type="text" value="again"></td>
   <td><input type="text" value="again"></td>
   <td><input type="text" value="again"></td>
   <td><input type="text" value="again"></td>
</tr>

I want to show class "sletindtastningfelt" if you focus on some of the input fields within the same tr

And on blur the class should hide..

And it should use its own class "sletindtastningfelt" and not another tr's class "sletindtastningfelt"

The table id is #diettable

Upvotes: 0

Views: 140

Answers (2)

Lightness Races in Orbit
Lightness Races in Orbit

Reputation: 385405

$(function() {
    $('.sletindtastningfelt').hide();

    $('input').focus(function() {
        $(this).closest('tr').find('.sletindtastningfelt').show();
    }).blur(function() {
        $('.sletindtastningfelt').hide();
    });
});

Live demo.

Upvotes: 2

Blazemonger
Blazemonger

Reputation: 93003

I think this is what you want:

$('input:text').focus(function() {
    $(this).closest('tr').find('.sletindtastningfelt').show();
});
$('input:text').blur(function() {
    $(this).closest('tr').find('.sletindtastningfelt').hide();
});

Upvotes: 1

Related Questions