jQuery 如何从表中获取隐藏的 td 值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9565256/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get hidden td value from a table?
提问by saran
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.
我编写了一个函数来在鼠标悬停时显示另一个 div。
$(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...
现在我需要在鼠标悬停时获取“id”值。
我试过这个函数，但它返回一个空值......
$(function(){
$('.divOne').hover(function(){
var id = $(this).find('td.hidden').html();
alert(id);
});
});
Can any one help me?
谁能帮我？
回答by ShadowScripter
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 tdwithin a td.
When you do $(this)within the context of an event function, it refers to the element whose event was triggered.
您的代码的问题在于您试图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"
});
However, if you'd use the proper tree traversal function siblingsand the pseudo class :hiddenyou'd be successful in your endeavor.
但是，如果您使用正确的树遍历函数siblings和伪类:hidden，您的努力就会成功。
$('.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.
这会给你所有td隐藏的s。由于您的示例只有一列隐藏，因此应该足够了。
If you'd want a specific sibling you could either add a class or use a combo :nth-child(n):hidden.
如果您想要一个特定的兄弟姐妹，您可以添加一个类或使用一个组合: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, tdis by using either of the pseudo-classes
获取第三个也是最后一个 id 的最简单方法td是使用任一伪类
You could also define your own class, like myclassand then do
你也可以定义你自己的类，就像myclass然后做
$("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 trso 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.
请注意选择器的使用，我改为使用选择器，table tr以便仅在您将鼠标悬停在表格行中或将其移出时才需要触发事件。这也使我能够使用上下文引用。现在$(this)指的是用户悬停的行，并且其所有子项 ( tds) 都在其中。
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 userschildren, but the element's children.
这将选择限制为用户悬停的元素及其子元素。呃……我的意思不是用户的孩子，而是元素的孩子。
$("td:nth-child(3)", this)
equals to: find the third table division within this row I'm hovering
等于： find the third table division within this row I'm hovering
References
参考
回答by ninja
Instead of using inline css "visibility:hidden", add a class to that object called "hidden", and in your .css file add:
不要使用内联 css“visibility:hidden”，而是向该对象添加一个名为“hidden”的类，并在您的 .css 文件中添加：
.hidden {
display:none;
}
This will make your code work ( I think ), and also make your mark-up look much better.
这将使您的代码工作（我认为），并使您的标记看起来更好。
回答by mgibsonbr
If you really want visibility:hiddeninstead of display:none, use a filter (Edit:as Crab Bucket noted, find search only descendants, when what you want are the siblings):
如果您真的想要visibility:hidden而不是display:none，请使用过滤器（编辑：如 Crab Bucket 所述，仅查找搜索后代，当您想要的是兄弟姐妹时）：
var id = $(this).siblings().filter(function() {
return $(this).css("visibility") === "hidden";
}).html();
AFAIK there's not direct way of doing using only selectors. (you couldcheck the "style" attribute and do a partial match, but that breaks if the style property comes from a class or css file)
AFAIK 没有直接使用选择器的方法。（您可以检查“style”属性并进行部分匹配，但如果 style 属性来自类或 css 文件，则会中断）
回答by Crab Bucket
The find()function works on the descendants so $(this).findwon't find the hovered element
Try
该find()函数适用于后代，因此$(this).find不会找到悬停的元素尝试
if($(this).has('.hidden'))
{
var id = $(this).html();
}
回答by me_digvijay
Add a separate class for your hidden td tags: class="divOne hidden". Now do the following
为隐藏的 td 标签添加一个单独的类：class="divOne hidden"。现在执行以下操作
$(function(){
$('.divOne').hover(function(){
var id11 = $('.hidden')[0];
id1 = $(id11).html();
var id22 = $('.hidden')[1];
id2 = $(id22).html();
alert(id1 + " " + id2);
});
});
回答by cscharr
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:
您可以简单地使用 jQuery 属性选择器和“.nextAll()”遍历方法，假设“id”列是唯一的隐藏列。请尝试以下操作：
$(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
编辑：更正了选择器，感谢@mgibsonbr 提到“：隐藏”选择器不包括可见性属性
