如果用户使用鼠标输出表,如何删除按钮？

Question

小提琴

我现在拥有的几乎是好的,但是当您沿着表格行移动鼠标时,按钮因某种原因被删除,这是我不想要的.我只是在整个表格的鼠标输出时要删除的按钮.

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

Answer 1

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

还要注意按钮现在.editButton.

这是它的实际应用:http://jsfiddle.net/23b99/15/