当我将鼠标悬停在第 1、2 和 3 列上时，我试图显示编辑| View |删除的子菜单。该子菜单将包含第 0 列的 user_id。该菜单将包含带有以下内容的超链接:用户 ID 并直接到我各自的 Controller 。我遇到困难的部分是(1)让菜单出现和消失，(2)仅在将鼠标悬停在第 1 列、第 2 列和第 3 列上时显示。这就是我所拥有的，但它还远远没有工作。
$('#table-list-users tbody').on('mouseenter', 'tr', function(){
// get all the data in the row
var data = table.row( this ).data();
console.log(data[0]);
// build my submenu
var subMenu = '<div> <a href=/MH_auth_admin/edit_user/' + data[0] +'>edit</a> | view | delete </div>';
console.log(subMenu);
// how do I stick it to just columns 1, 2, and 3???
$(this).append(subMenu);
});
// remove the submenu but it doesn't work right.
$('#table-list-users tbody').on('mouseleave', this, function(){
$(this).children("div").remove();
});
最佳答案
我建议在点击时抛出上下文菜单，而不是悬停，如下面的演示:
//sample source data for DataTable
const srcData = [
{id: 1, name: 'apple', category: 'fruit', qty: 5},
{id: 2, name: 'pear', category: 'fruit', qty: 7},
{id: 3, name: 'carrot', category: 'vegie', qty: 9}
];
//initialize DataTable
const dataTable = $('#mytable').DataTable({
dom: 't',
data: srcData,
columns: [
{title: 'id', data: 'id', className: 'menu'},
{title: 'name', data: 'name', className: 'menu'},
{title: 'category', data: 'category', className: 'menu'},
{title: 'qty', data: 'qty'}
]
});
//show context menu
$('#mytable').on('click', '.menu', function(event){
//get row data and populate 'id' menu item
const rowData = dataTable.row($(this).closest('tr')).data();
$('#rowId').text('row '+rowData.id);
//display the menu
$('#contextMenu').css({'top':(event.pageY+10)+'px','left':(event.pageX+10)+'px'});
$('#contextMenu').show();
});
//hide context menu
$('#contextMenu').on('mouseleave', function(){
$(this).hide();
});#contextMenu {
display: none;
z-index: 100;
position: absolute;
background: #fff;
box-shadow: 3px 3px 10px #5a5a5a;
padding: 5px;
}
.menu {
cursor: pointer;
}
#contextMenu div {
display: block;
}
#contextMenu div:hover {
background: lightgray;
cursor: pointer;
}<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
<div id="contextMenu">
<div id="rowId"></div>
<div id="delete">delete</div>
<div id="edit">edit</div>
<div id="properties">properties</div>
</div>
</body>
</html>关于javascript - 数据表 - 在单元格上附加和删除子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55431867/