How to get hidden td value from table?
I have a table of this format.
<table> <tr> <td class="divOne">div one</td> <td class="divOne">11111</td> <td style="visibility:hidden" class="divOne">id1</td> </tr> <tr> <td class="divOne">div two</td> <td class="divOne">22222</td> <td style="visibility:hidden" class="divOne">id2</td> </tr></div> </table> I wrote a function to display another div on the mouse.
$(function() { $('.divOne').hover(function() { $('#Details').show(); }, function() { $('#Details').hide(); }); }); Now I need to get the "id" value on the mouse.
I tried this function but returns a null value ...
$(function(){ $('.divOne').hover(function(){ var id = $(this).find('td.hidden').html(); alert(id); }); }); Can anyone help me?
Description
I think others make it too complicated for you.
The problem with your code is that you are trying to find td inside td . When you execute $(this) in the context of an event function, this refers to the element whose event was raised.
$('.divOne').hover(function(){ $(this); //<- "this" refers to the current "divOne" the user is hovering. // ".divOne" or $(this) is a td $(this).find("td.hidden"); //<- Attempts to find a td with the class "hidden" within ".divOne" }); However, if you use the correct siblings tree traversal function and the :hidden pseudo- :hidden you will succeed in your efforts.
$('.divOne').hover(function(){ var id = $(this).siblings(":hidden").html(); }); This will give you all hidden td . Since your example contains only one column, it should be sufficient.
If you need a specific sibling, you can either add a class or use a combo :nth-child(n):hidden .
$('.divOne').hover(function(){ var id = $(this).siblings(".myclass:hidden").html(); }); Example
The easiest way to capture the identifier of the third and finally td is to use any of the pseudo-classes
You can also define your own class, for example myclass , and then do
$("td.myclass") Here is a working JSFiddle example | The code
$('table tr').hover( function(){ var id = $("td:nth-child(3)", this).text(); //var id = $("td:last-child", this).text(); //var id = $("td.myclass", this).text(); $("#Details").html("Details box.<br /> Hovering \""+id+"\""); $("#Details").show(); }, function() { $('#Details').hide(); } ); Pay attention to the use of the selector, where instead I use table tr so that events are fired only after you enter and exit the table row. It also allows me to use a context link. Now $(this) refers to the line the user is in, and all its children ( td s) are inside it.
I also use a selector with a second parameter , defining the context of my choice. By default, this is the entire document.
This limits the selection to the element that the user has hovering over and its children. Err ... I do not mean users, but children.
$("td:nth-child(3)", this) equals: find the third table division within this row I'm hovering
References
- JQuery selectors
- Using second parameter in jQuery selector
- Pseudo-classes
- Tree traversal
Instead of using the built-in css "visibility: hidden", add a class to this object called "hidden", and in your .css file add:
.hidden { display:none; } This will make your code work (I think), and also make your premium much better.
If you really want visibility:hidden instead of display:none , use a filter (Edit: as Crab Bucket noted, find only descendants of descendants, when you want, brothers and sisters):
var id = $(this).siblings().filter(function() { return $(this).css("visibility") === "hidden"; }).html(); AFAIK has no direct way to use selectors only. (you can check the "style" attribute and make a partial match, but this breaks if the style property comes from a class file or css).
You can simply use the jQuery attribute selector and the ".nextAll ()" move method, assuming that the "id" -column is the only hidden column. Try the following:
$(function(){ $('.divOne').hover(function(){ var id = $(this).nextAll('td[visibility="hidden"]').text(); alert(id); }); }); Edit: Fixed selector, thanks to @mgibsonbr for mentioning that the ": hidden" selector does not apply to the visibility attribute
The find() function works with descendants, so $(this).find will not find the hovering element Try
if($(this).has('.hidden')) { var id = $(this).html(); } Add a separate class for your hidden td tags: class = "divOne hidden". Now do the following
$(function(){ $('.divOne').hover(function(){ var id11 = $('.hidden')[0]; id1 = $(id11).html(); var id22 = $('.hidden')[1]; id2 = $(id22).html(); alert(id1 + " " + id2); }); });