xkeshav
xkeshav

Reputation: 54016

why this simple jquery code not working?

I'm trying to display different data based on the click of different th elements of a table. I'm using jQuery 1.7

But I dont know why this is not working??

what i want is that when user click on specific th then the table which have the class of that th id shoud display and other tables must be hidden at that time..

Here is my fiddle and please helps me out.

http://jsfiddle.net/78UKh/3/

Note : Please dont suggest other ways around, because I have written a lot of jquery code already in that page.

Thanks

Upvotes: 2

Views: 88

Answers (4)

Coelhone
Coelhone

Reputation: 310

another selector you could use (better for other attributes)

$('#detailsDiv > table[class~="'+thisvalue+'"]').show();

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

Try it this way:

$('#detailsTab th').live('click', function(){
            var thisvalue = $(this).attr('id');
            $('table.' + thisvalue).show();
});

JS Fiddle demo.

Since I assume that you want to show only the relevant table:

$('#detailsTab th').live('click', function(){
            var thisvalue = $(this).attr('id');
            $('table').not('#detailsTab, table.' + thisvalue).hide();
            $('table.' + thisvalue).show();
});

JS Fiddle demo.

Note: in your JS Fiddle the id for your 'Amenities' th was 'amenities' whereas the class-name for the relevant table was 'Amenities.' I've amended this so that they're both the same case in my demos.

Upvotes: 1

Niels
Niels

Reputation: 49919

Instead of using:

$('#detailsDiv > table').hasClass(''+thisvalue +'').show();

Use a filter:

$('#detailsDiv > table').filter('.'+thisvalue +'').show();

Or within 1 selector

$('#detailsDiv > table.' +thisvalue).show();

hasClass checks if the table has a class, which returns a boolean. The filter function filters between te current results.

Live demo: http://jsfiddle.net/78UKh/4/

Upvotes: 5

Related Questions