Javascript Datatables-附加和删除单元格上的子菜单

当我将鼠标悬停在第1列、第2列和第3列上时，我试图获得“编辑|查看|删除”的子菜单。子菜单将包括用户id，即第0列。该菜单将具有带有用户id的超链接，并直接指向我各自的控制器。我遇到的困难是：（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();
}); 

$（“#表列表用户tbody”）。在（'mouseenter'，'tr'，function（）上{
//获取行中的所有数据
var data=table.row（this.data（）；
console.log（数据[0]）；
//构建我的子菜单
变量子菜单='|查看|删除'；
console.log（子菜单）；
//如何将其仅粘贴到第1列、第2列和第3列？？？
$（此）.append（子菜单）；
});
//删除子菜单，但它无法正常工作。
$（“#表列出用户tbody”）。在（'mouseleave'，this，function（）上{
$（this.children（“div”）.remove（）；
}); 

我建议在单击时抛出上下文菜单，而不是像下面的演示那样悬停：

//数据表的示例源数据
常数srcData=[
{id:1，名称：“苹果”，类别：“水果”，数量：5}，
{id:2，名称：“梨”，类别：“水果”，数量：7}，
{id:3，名称：'carrot'，类别：'vegie'，数量：9}
];
//初始化数据表
const dataTable=$（“#mytable”）.dataTable({
dom：‘t’，
数据：srcData，
栏目：[
{title:'id'，data:'id'，className:'menu'}，
{title:'name'，data:'name'，className:'menu'}，
{title:'category'，data:'category'，className:'menu'}，
{标题：“数量”，数据：“数量”}
]
});
//显示关联菜单
$（“#mytable”）。在（'单击'，'菜单'，函数（事件）{
//获取行数据并填充“id”菜单项
const rowData=dataTable.row（$（this.closest（'tr'））.data（）；
$（'#rowId'）.text（'row'+rowData.id）；
//显示菜单
$（'contextMenu'）.css（{'top'：（event.pageY+10）+'px'，'left'：（event.pageX+10）+'px}）；
$（“#上下文菜单”）.show（）；
});
//隐藏关联菜单
$（'#contextMenu'）。在（'mouseleave'，function（）上{
$（this.hide（）；
});
#上下文菜单{
显示：无；
z指数：100；
位置：绝对位置；
背景：#fff；
盒影：3px 3px 10px#5a5a；
填充物：5px；
}
.菜单{
光标：指针；
}
#上下文菜单div{
显示：块；
}
#上下文菜单div：悬停{
背景：浅灰色；
光标：指针；
}

删除
编辑
性质