How to get hidden td value from a table?

Question

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 have written a function to show another div on mouse over.

$(function() {
  $('.divOne').hover(function() { 
  $('#Details').show(); 
}, function() { 
  $('#Details').hide(); 
});
});

Now I need to get the 'id' value on mouse over.
I tried this function, but it returns a null value...

$(function(){
$('.divOne').hover(function(){
  var id = $(this).find('td.hidden').html();
  alert(id);
});
});

Can any one help me?

Can you use hiddenfield [`` ? If yes, take a look at http://stackoverflow.com/questions/10817041/jquery-to-get-hidden-field-value-in-table-row — LCJ, Feb 22 '13 at 03:35

score 13 · Accepted Answer · edited May 23 '17 at 12:25

Explanation

I think the others are making it too difficult for you.

The problem with your code is that you're attempting to find a td within a td. When you do $(this) within the context of an event function, it refers to the element whose event was triggered.

$('.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'd use the proper tree traversal function siblings and the pseudo class :hidden you'd be successful in your endeavor.

$('.divOne').hover(function(){
   var id = $(this).siblings(":hidden").html();
});

That would give you all the tds that are hidden. Since your example only had one column that was hidden, it should suffice.

If you'd want a specific sibling you could 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 grab the id of the third, and last, td is by using either of the pseudo-classes

You could also define your own class, like myclass and then do

$("td.myclass")

Here's a working JSFiddle example | 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();
    }
);

Notice the use of the selector, where I instead use table tr so that the events only need to be triggered once you hover in and out a table row. This also enables me to use a context reference. Now $(this) refers to the row the user is hovering, and all its children (tds) are within it.

I also use a selector with a second parameter, defining the context of my selection. By default it is the entire document.

This limits the selection to the element the user is hovering and its children. Err... by that, I mean not the users children, but the element's children.

$("td:nth-child(3)", this)

equals to: find the third table division within this row I'm hovering

References

+1 only because unable to +2. Very helpful review/summary of selectors, pseudo-classes and tree traversal. — cssyphus, Apr 23 '13 at 15:52

score 1 · Answer 2 · answered Mar 05 '12 at 10:44

1

Instead of using inline css "visibility:hidden", add a class to that object called "hidden", and in your .css file add:

.hidden {
    display:none;    
}

This will make your code work ( I think ), and also make your mark-up look much better.

answered Mar 05 '12 at 10:44

ninja

2,233
1
15
15

mgibsonbr · Answer 3 · 2012-03-05T11:00:04.947

If you really want visibility:hidden instead of display:none, use a filter (Edit: as Crab Bucket noted, find search only descendants, when what you want are the siblings):

var id = $(this).siblings().filter(function() {
    return $(this).css("visibility") === "hidden";
}).html();

AFAIK there's not direct way of doing using only selectors. (you could check the "style" attribute and do a partial match, but that breaks if the style property comes from a class or css file)

cscharr · Answer 4 · 2012-03-05T10:58:07.413

0

You can simply use the jQuery attribute selector and the ".nextAll()" traversing method, assumed 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: Corrected selector, thx to @mgibsonbr for mentioning that ":hidden" selector doesn't cover visibility attribute

edited Mar 05 '12 at 10:58

answered Mar 05 '12 at 10:50

cscharr

26
3

According to the [api docs](http://api.jquery.com/hidden-selector/), elements with `visibility:hidden` are considered to be visible, since they still consume space in the layout. – mgibsonbr Mar 05 '12 at 10:52

score 0 · Answer 5 · answered Mar 05 '12 at 10:52

0

The find() function works on the descendants so $(this).find won't find the hovered element Try

if($(this).has('.hidden'))
{
  var id = $(this).html();
}

answered Mar 05 '12 at 10:52

Crab Bucket

6,219
8
38
73

How exactly is this going to work if the element is hidden and the hover events won't fire because it is in fact hidden? If you ask me, this is a "syntactically" null statement. :P – ShadowScripter Mar 05 '12 at 14:17

score 0 · Answer 6 · answered Mar 05 '12 at 11:27

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);
    });
});

How to get hidden td value from a table?

6 Answers6

Explanation

Example

References