1

小提琴

我现在所拥有的几乎是好的，但是当您沿着表格行移动鼠标时，按钮会由于某种原因被移除，这是我不想要的。如果您将鼠标移出整个表格，我只会删除要删除的按钮。

HTML：看起来像任何具有 3 列 12 行 + 3 列的旧表<thead>。

JS：

$(document).ready(function(){
    $('#editData tr').hover(function(){
        $('button').remove();
        $(this).children('td:last-child').append('<button id="editButton">Edit</button>');
    });
    $('#editData').mouseout(function(){
        $('button').remove();
    });
});

CSS：

#editData {
  width: 500px;
  margin: auto;
  background: #dadce1;
  margin-bottom: 50px;
  box-shadow: 0 0 10px 1px #e1e1e1;
}
#editData tbody {
  border: 1px solid #b8b8b8;
  border-top: 0;
}
#editData thead {
  border: 1px solid #b8b8b8;
  border-bottom: 0;
  background: rgba(255,255,255,0.7);
  font-size: 20px;
}
#editData thead th {
  padding: 10px;
  font-weight: bold;
  text-align: center;
}
#editData th:last-child, #editData tr td:last-child {
  width: 40px;
}
#editData tr {
  text-align: center;
  height: 30px;
}
#editData td {
  padding: 3px;
}
#editData tr:nth-child(even) {
  background: rgba(255,255,255,0.7);
}
#editButton {
  width: 40px;
  height: 24px;
  border-radius: 5px;
  padding: 0;
}
4

5 回答 5

5

当 DOM 准备好时，最好附加所有按钮：

$(function() {
  $('#editData tr td:last-child').append('<button class="editButton">Edit</button>');
});

然后使用 CSS 显示/隐藏按钮：

.editButton {
  width: 40px;
  height: 24px;
  border-radius: 5px;
  padding: 0;
  display: none;
}

#editData tr:hover .editButton {
  display: block;
}

还要注意按钮是 now .editButton。

这是它的实际操作：http: //jsfiddle.net/23b99/15/

于 2013-02-15T18:27:41.813 回答
2

使用第二个参数.hover。这会将mouseleave处理程序附加到您的行 ( tr)。

$('#editData tr').hover(function(){
    $(this).children('td:last-child').append('<button id="editButton">Edit</button>');
}, function() {
    $('button').remove();
});

小提琴

基本上，只需平衡行的您mouseenter和mouseleave处理程序。

此外，如果您有兴趣了解真正的问题，请阅读mouseoutvsmouseleave（页面底部的演示）。

问题是，mouseout每次它在表格的任何后代中触发时都会冒泡，它会冒泡到表格元素并触发其 mouseout 处理程序。

从mouseout文档：

由于事件冒泡，这种事件类型会引起很多麻烦。例如，在本例中，当鼠标指针移出 Inner 元素时，mouseout将向该元素发送一个事件，然后向 Outer 发送一个事件。这可能会mouseout在不合时宜的时间触发绑定处理程序。.mouseleave()有关有用的替代方案，请参阅讨论。

hover只是附加mouseenter和mouseleave处理程序的简写，您可以显式使用mouseleave而不是mouseout在原始示例中使用它，它也可以工作：

$('#editData tr').mouseenter(function(){
    $('button').remove();
    $(this).children('td:last-child').append('<button id="editButton">Edit</button>');
});
$('#editData').mouseleave(function(){
    $('button').remove();
});

小提琴

第二段代码是您所要求的：它在您mouseleave使用表格时删除所有按钮，而第一个是我的重构版本，mouseenter它在您行时附加一个按钮并在您使用时将其删除mouseleave。两者具有相同的可见效果。

旁注：我已经替换了示例中的hoverby ，因为在使用单个参数调用时会不必要地将处理程序附加到两者和事件上。mouseenter.hovermouseentermouseleave

使用.hover, mouseleavefortr将删除按钮并创建一个新按钮，当您将鼠标移动到表格外部时，事件将冒泡到表格元素删除刚刚创建的按钮，或者如果您将鼠标移动到另一个行，处理程序也将被调用两次（mouseleave旧行和mouseenter新悬停目标行）。当然，这是不可见的，因为这些处理程序将在微秒内执行，并且浏览器可能会分组重绘。您可以看到，这就是这个fiddleconsole.log中的一些 s实际发生的情况。

这在此用例中可能没有太大区别（性能除外），但在许多其他情况下，您可能会遇到问题 - 关于 SO 的许多问题是因为提问者认为.hover()使用单个参数调用只会附加一个mouseenter处理程序，但事实并非如此.

附言。我将这个答案针对您的事件冒泡/逻辑问题，但您不必为了这么简单的事情滥用 jQuery。@Daryl Ginn 的回答是非常适合实际使用的解决方案。=]

于 2013-02-15T18:22:51.183 回答
0

你只需要用 替换hover，mouseover然后它就可以工作了。

于 2013-02-15T18:22:11.927 回答
0

问题是当鼠标离开'td'时会发生mouseout，但由于它位于'tr'上，所以悬停不会再次发生。通过在“td”上进行悬停，当您使用鼠标水平移动并越过列边界时，您会开始新的悬停。

试试这个改变。tr -> td 并添加一个 .parent()

$(document).ready(function(){
    $('#editData td').hover(function(){
        $('button').remove();
        $(this).parent().children('td:last-child').append('<button id="editButton">Edit</button>');
    });
    $('#editData').mouseout(function(){
        $('button').remove();
    });
});

新小提琴

于 2013-02-15T18:24:19.337 回答
0

我想你正在寻找这个：http: //jsfiddle.net/23b99/13/

    $(document).ready(function () {
       $('#editData tr').hover(function () {
         $('button').remove();
         $(this).children('td:last-child').append('<button id="editButton">Edit</button>');
       }, function () {
         $('button').remove();
       });
    });
于 2013-02-15T18:29:15.590 回答