How to get hidden td value from a 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 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?

---

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 td s 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

:nth-child(n)

:last-child

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 ( td s) 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

JQuery selectors

Using a second parameter in JQuery selector

Pseudo-classes

:hidden

:last-child

:nth-child

Tree traversal

.siblings()

---

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.

---

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)

链接地址: http://www.djcxy.com/p/26676.html

上一篇: jquery下一个相邻的选择器$（this）

下一篇: 如何从表中获取隐藏的td值？