Jquery 鼠标悬停在表格行下方的按钮菜单

我正在做一个项目，在这个项目中，我将在一个表的一行上有很多信息。为了不丢失空间，我试图找到一种方法，将一个带有按钮的集中行放在表中选定行的正下方。就这样,

$（'#mytable tr'）。悬停（函数（）{
$（this.addClass（'hover'）；
}，函数（）{
$（this.removeClass（'hover'）；
});
#mytable tr:悬停{
背景颜色：浅蓝色；
}

标题1
标题2
标题3
标题4
项目1
A.
aa
aaa
项目2
B
bb
bbb
项目3
C
复写的副本
ccc
你在找这样的东西吗


$（文档）.ready（函数（）{
$（'#mytable tbody tr'）。悬停（函数（）{
$（this.addClass（'hover'）；
var rowP=$（this.offset（）；
var rowH=$（this）.height（）；
var offset=rowP.top+rowH；
var left=$（'td:first'，$（this））.width（）+20；
$（'td:first'，$（this））.prepend（$（'.button pane'）；
$（'.button pane'，$（this））.css({
“页边距顶部”：偏移量+“px”，
“左边距”：左+像素
}).show（）；
}，功能（事件）{
$（this.remove（“.button pane”）；
$（this.removeClass（'hover'）；
$（'.button pane'）.hide（）；
});
});
#mytable tbody tr:悬停{
背景颜色：浅蓝色；
}
.按钮窗格{
显示：无；
位置：绝对位置；
浮动：左；
顶部：0px；
左：0px；
背景颜色：浅蓝色；
宽度：150px；
高度：30px；
填充：4px；
文本对齐：居中；
}
.按钮窗格按钮{
显示：内联；
光标：指针；
}

标题1
标题2
标题3
标题4
项目1
A.
aa
aaa
项目2
B
bb
bbb
项目3
C
复写的副本
ccc
按钮1
按钮2
谢谢。如果这个答案对你有用，请接受。我可以问你一些别的问题吗？我正在使用带有分页的jquery datatable插件。“div”按钮窗格未精确显示在行下方。您知道发生了什么吗？您可能需要根据表格行的高度等调整偏移逻辑，以确定按钮窗格div顶部应显示的位置。