如何从表中获取隐藏的 td 值？

Question

我有一个这种格式的表格。

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

谁能帮帮我？

Answer 1

说明

我认为其他人对你来说太难了。

您的代码的问题是您试图在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();
});

这会给你所有隐藏的tds。由于您的示例只有一列被隐藏，因此应该足够了。

如果您想要一个特定的兄弟姐妹，您可以添加一个类或使用组合 :nth-child(n):hidden。

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

---

示例

获取第三个也是最后一个 td 的 id 的最简单方法是使用任一伪类

• :nth-child(n)
• :last-child

你也可以定义你自己的类，比如myclass 然后做

$("td.myclass")

Here's a working JSFiddle example |代码

$('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) 指的是用户悬停的行，它的所有子项（tds）都在其中。

我还使用selector with a second parameter，定义我的选择的上下文。默认情况下，它是整个文档。

这将选择限制为用户悬停的元素及其子元素。呃……我的意思不是 users 子元素，而是元素的子元素。

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

等于：find the third table division within this row I'm hovering

---

参考文献

• JQuery selectors
• Using a second parameter in JQuery selector
• Pseudo-classes
  • :hidden
  • :last-child
  • :nth-child
• Tree traversal
  • .siblings()

Answer 2

不要使用内联 css“visibility:hidden”，而是向该对象添加一个名为“hidden”的类，然后在您的 .css 文件中添加：

.hidden {
    display:none;    
}

这将使您的代码工作（我认为），并使您的标记看起来更好。

Answer 3

如果您真的想要visibility:hidden 而不是display:none，请使用过滤器（编辑： 如 Crab Bucket 所述，仅查找后代，而您想要的是兄弟姐妹）：

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

AFAIK 没有直接使用选择器的方法。 （您可以检查“样式”属性并进行部分匹配，但如果样式属性来自类或 css 文件，则会中断）

Answer 4

find() 函数适用于后代，因此$(this).find 不会找到悬停的元素 试试

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

Answer 5

您可以简单地使用 jQuery 属性选择器和“.nextAll()”遍历方法，假设“id”列是唯一隐藏的列。 请尝试以下操作：

$(function(){
  $('.divOne').hover(function(){
    var id = $(this).nextAll('td[visibility="hidden"]').text();
    alert(id);
  });
});

编辑：更正了选择器，感谢@mgibsonbr 提到 ":hidden" 选择器不包含可见性属性

Answer 6

为隐藏的 td 标签添加一个单独的类： class="divOne 隐藏"。 现在执行以下操作

$(function(){
    $('.divOne').hover(function(){
    var id11 = $('.hidden')[0];
    id1 = $(id11).html();
    var id22 = $('.hidden')[1];
    id2 = $(id22).html();
    alert(id1 + "  " + id2);
    });
});