javascript - 从弹出框访问表格行

Question

我目前有一个带有按钮的 Bootstrap 弹出窗口。仅当鼠标悬停在表格的 tr 上时才会显示弹出窗口。

我想做的是能够访问该行的元素，这可能吗。

弹窗代码:

$('.popup').popover(
    {
      placement: 'top',
      trigger: 'manual',
      delay: { show: 350, hide: 100 },
      html: true,
      content: $('#shortcuts').html(),
      title: "Quick Tasks"
    }
  ).parent().delegate('#quickDeleteBtn', 'click', function() {
      alert($(this).closest('tr').children('td').text()); // ???
});
    var timer,
        popover_parent;
    function hidePopover(elem) {
        $(elem).popover('hide');
    }
    $('.popup').hover(
        function() {
          var self = this;
          clearTimeout(timer);
          $('.popover').hide(); //Hide any open popovers on other elements.
          popover_parent = self
          //$('.popup').attr("data-content","WOOHOOOO!");
          $(self).popover('show');            
        }, 
        function() {
          var self = this;
          timer = setTimeout(function(){hidePopover(self)},250);                 
    });
    $(document).on({
      mouseenter: function() {
        clearTimeout(timer);
      },
      mouseleave: function() {
        var self = this;
        timer = setTimeout(function(){hidePopover(popover_parent)},250); 
      }
    }, '.popover');

HTML:

<div class="hide" id="shortcuts">
    <a href="javascript:void(0);" id="quickDeleteBtn" class="btn btn-danger">Delete</a>
    </div>

在行上实现弹出框的javascript:

rows += '<tr class="popup datarow" rel="popover">';

有谁知道我在这里做错了什么以及我应该如何访问我悬停的 tr 的子元素？

JSFiddle:http://jsfiddle.net/C5BjY/8/

Answer 1

出于某种原因，我无法让 closest() 正常工作。使用 parent().parent() 获取包含 .popover 的分隔符，然后使用 prev() 获取前一个 然而，tr 元素似乎可以解决问题。

只是改变:

alert($(this).closest('tr').children('td').text());

收件人:

alert($(this).parent().parent().prev('tr').children('td').text());

JSFiddle example .

---

作为旁注，由于您的 Fiddle 使用 jQuery 1.10.1，您应该将 delegate() 更改为 on() :

on('click', '#quickDeleteBtn', function(index) { ... });