如何从表中获取隐藏的td值？
我有一个这种格式的表格。
<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>
我写了一个函数来显示另一个鼠标在div上。
$(function() {
$('.divOne').hover(function() {
$('#Details').show();
}, function() {
$('#Details').hide();
});
});
现在我需要在鼠标上获取'id'值。
我试过这个函数，但它返回一个空值...
$(function(){
$('.divOne').hover(function(){
var id = $(this).find('td.hidden').html();
alert(id);
});
});
谁能帮我？
说明
我认为其他人对你来说太难了。
与您的代码的问题是，你正在试图找到一个td一内td 。 当您在事件函数的上下文中执行$(this) ，它指向事件被触发的元素。
$('.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"
});
然而，如果你使用适当的树遍历函数siblings和伪类:hidden你会在你的努力中取得成功。
$('.divOne').hover(function(){
var id = $(this).siblings(":hidden").html();
});
那会给你所有隐藏的td 。 由于您的示例只有一列被隐藏，因此应该就足够了。
如果你想要一个特定的兄弟姐妹，你可以添加一个类或使用组合:nth-child(n):hidden 。
$('.divOne').hover(function(){
var id = $(this).siblings(".myclass:hidden").html();
});
例
获取第三个和最后一个td的id的最简单方法是使用任一伪类
:nth-child(n) :last-child 你也可以定义你自己的类，比如myclass ，然后做
$("td.myclass")
这是一个可用的JSFiddle示例| 码
$('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();
}
);
注意使用选择器，我使用table tr这样只要将鼠标悬停在表格行中就可以触发事件。 这也使我能够使用上下文引用。 现在$(this)指向用户悬停的行，并且它的所有子元素（ td s）都在其中。
我还使用带有第二个参数的选择器，定义我的选择的上下文。 默认情况下它是整个文档。
这限制了对用户悬停的元素及其子元素的选择。 呃......我的意思不是用户的孩子，而是孩子的孩子。
$("td:nth-child(3)", this)
等于： find the third table division within this row I'm hovering
参考
:hidden :last-child :nth-child .siblings() 而不是使用内联css“visibility：hidden”，将一个类添加到名为“hidden”的对象中，并在.css文件中添加：
.hidden {
display:none;
}
这会使你的代码工作（我认为），并使你的标记看起来好多了。
如果你真的想要visibility:hidden而不是display:none ，使用过滤器（编辑：作为蟹桶记录，找到只搜索后裔，当你想要的是兄弟姐妹）：
var id = $(this).siblings().filter(function() {
return $(this).css("visibility") === "hidden";
}).html();
AFAIK没有直接使用选择器的方法。 （你可以检查“style”属性并进行部分匹配，但是如果style属性来自类或css文件则会中断匹配）
链接地址: http://www.djcxy.com/p/26675.html