在表格行鼠标悬停时显示表格单元格 [英] Show table cell on table row mouseover

问题描述

我有一张看起来像这样的桌子.

I have a table that looks something like this.

<table>
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
  </thead>
  <tbody>
    <tr class="data">
      <td>Info here</th>
      <td><a href"/url_here" class="edit">Edit</a></td>
    </tr>
    <tr class="data">
      <td>More here</th>
      <td><a href"/url_here" class="edit">Edit</a></td>
    </tr>
  </tbody>
</table>

当您将鼠标悬停在的任何行上时，我想显示编辑"链接.我已经尝试了几种方法来做到这一点，但是一直遇到同样的问题.假设我只是在想这是错误的方法.

I want to show the Edit link when you mouse over any of the rows inside of the . I have tried a few methods of doing this, but keep hitting the same problem. Assuming I'm just thinking about this the wrong way.

这是我目前拥有的.

$('a[class*=edit]').hide(); 

$('tr[class*=data]').bind("mouseover", function(e) {
  $(e.target).closest('a[class*=edit]').addClass("selected");
  $('a[class*=selected]:first').show();
}).mouseout(function() {
  $('a[class*=selected]').hide();
  $('a[class*=edit]').removeClass("selected");
})

现有代码的问题是，除非您将鼠标悬停在编辑链接上，否则不会添加所选的类.就像我上面提到的，当您将鼠标悬停在该行中的任何位置时，我都需要它来添加所选的类.我也只希望它显示该特定行的编辑链接.

Problem with the existing code is it's not adding the selected class unless you hover directly over the edit link. Like I mentioned above I need it to add the selected class when you mouse over anywhere in the that row. I also only want it to display the edit link for that specific row.

将我的头发拉出几个小时，对您的任何帮助都将不胜感激，我知道这可能是愚蠢的.谢谢！

Any help would be really appreciated been pulling my hair out for a couple hours and I know it is probably something stupid. Thanks!

推荐答案

几件事:

• 传递给神奇的$() jQuery函数的字符串可以等同于您想要设置特定元素样式的CSS样式表中的字符串.您现在使用选择器的方式除了不太清楚之外，效率极低.例如，使用=*选择器试图在class属性中查找字符串为edit anywhere 的所有链接.因此，具有abceditabc类的链接将匹配.这使得jQuery做比查找这些不存在的链接所需的工作更多的工作.公认的用法是使用选择器字符串，例如a.edit，jQuery可以快速确定它是什么以及如何获取它.
• 每当您像执行操作一样进行事件绑定时，this都引用事件当前在函数内部作用的元素.除非您进行事件委托，否则您将不会真正使用e.target.
• 您的代码仅在将鼠标悬停在链接上时才起作用的原因是，每当您将鼠标悬停在其他单元格上时，e.target就是同级td. closest没有能力然后将那个td向上遍历到tr，再向下一个td向下遍历到链接.即使这样做，您也可能想要避免这种情况，因为这是没有必要的.这与第二点有关，因为简单地查找表行中的链接要容易得多.

• The string that you pass to the magical $() jQuery function can be the equivalent of what you may put in a CSS stylesheet if you wanted to style a particular element. The way you are using the selectors right now is wildly inefficient in addition to not being very clear. For example, using the =* selector is trying to find all links with the string edit anywhere in the class attribute. So links with a class of abceditabc would match. This makes jQuery do much more work than necessary trying to find these non-existent links. The accepted usage is instead to use a selector string such as a.edit which jQuery can quickly determine what it is and how to get it.
• Whenever you do an event binding like you are doing, this refers to the element that the event is currently being acted on inside the function. Unless you are doing event delegation, you're not really going to use e.target.
• The reason your code is only working when the hover is directly over the link is because whenever you hover over a different cell e.target would be a sibling td. closest does not have the ability to then traverse up that td, to the tr, to the next td down to the link. And even if it did, you probably want to avoid this as it's not necessary. This ties to the second point, as it is much easier to simply look for the link coming down from the table row.

因此，请牢记这些内容，您可以重写此内容:

So, keeping these things in mind, you can rewrite what you have to this:

$(function() {
    $('a.edit').hide(); // hide all links with a class of edit
    // act upon all table rows with a class of data
    $('tr.data').hover(function() {
        // at this point, 'this' is the table row that is being hovered
        // we can use the find function to locate the link with a class of edit
        // then add a class to it and show it.
        $(this).find('a.edit').addClass("selected").show();
    }, function() {
        // the second argument of the hover function is what should happen
        // when the mouse hovers out of the table row. In this case, we want
        // to find the link again, remove the class, and hide it.
        $(this).find('a.edit').removeClass("selected").hide();
    });
});

您可以在此处看到在您发布的HTML上运行的HTML代码.在FF，IE上为我工作.

You can see the code this code acting on the HTML you posted here. Works for me on FF, IE.

一些进一步的建议:

• 始终打开 jQuery文档.很好地解释了事情是如何工作的.
• 在调试jQuery时习惯于使用Firefox/ Firebug .当您想确切地查看所选择的内容时，在选择器中使用console.log(this);是一项不可低估的功能.

• Always have the jQuery documentation open. It is very good at explaining how things work.
• Get used to using Firefox/Firebug when debugging your jQuery. Using console.log(this); inside your selectors when you want to see exactly what is being selected is a functionality that cannot be understated.

这篇关于在表格行鼠标悬停时显示表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！