Reputation: 54016
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.
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
Reputation: 310
another selector you could use (better for other attributes)
$('#detailsDiv > table[class~="'+thisvalue+'"]').show();
Upvotes: 0
Reputation: 253308
Try it this way:
$('#detailsTab th').live('click', function(){
var thisvalue = $(this).attr('id');
$('table.' + thisvalue).show();
});
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();
});
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
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