如何从表中获取隐藏的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在a中找到一个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();
});

例

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

• :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都在其中.

我还使用带有第二个参数的选择器,定义我选择的上下文.默认情况下,它是整个文档.

这会将选择限制为用户悬停的元素及其子元素.呃......那个,我的意思不是用户的孩子,而是元素的孩子.

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

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

参考

• JQuery选择器
• 在JQuery选择器中使用第二个参数
• 伪类
  • :hidden
  • :last-child
  • :nth-child
• 树遍历
  • .siblings()