Javascript “上一步/下一步”按钮不适用于我的表格

我有一个

表

，我想在其中添加上一个/下一个

按钮

，以便用户可以滑动浏览。但它似乎不起作用，因为我可能需要将

按钮

与我的

表

绑定，我不确定如何绑定

另外，箭头应该出现在我的

表格上，而不是出现在左上角和上下角。谢谢你的帮助


a{
文字装饰：无；
显示：内联块；
填充：8px 16px；
}
a:悬停{
背景色：#ddd；
颜色：黑色；
}
.以前的{
背景色：#f1f1；
颜色：黑色；
}
.下一个{
背景色：#4CAF50；
颜色：白色；
}
.轮{
边界半径：50%；
}
您可以创建一个旋转木马来旋转图像

只需添加一个在图像中旋转的“上一个”和“下一个”按钮


（函数（$）{
$.fn.shiftChildrenRight=函数（选择器）{
返回this.prepend（this.find（selector）.last（）.detach（））；
};
$.fn.shiftChildrenLeft=函数（选择器）{
返回this.append（this.find（selector.first（）.detach（））；
};
})（jQuery）；
$（'.btn prev'）。on（'click'，函数（e）{navigate（-1）；}）；
$（'.btn next'）。在（'click'，函数（e）{navigate（+1）；}）；
功能导航（方向）{
开关（方向）{
案例1:$（'.frames'）。将子对象向右移动（'.frames'）；中断；
案例1:$（'.frames'）.shiftChildrenLeft（'.frames'）；break；
}
}
.carousel{
位置：相对位置；
宽度：600px；
边框：薄实灰色；
背景：#222；
}
.frames{文本对齐：居中；}
.框架{
位置：相对位置；
显示：内联块；
边缘：0.1米；
}
.标题{
位置：绝对位置；
底部：0.5em；
文本对齐：居中；
保证金：0自动；
宽度：100%；
背景：rgba（0,0,0,0.4）；
颜色：rgba（255，255，255，0.9）；
填充：0.333em0；
}
.btn{
位置：绝对位置；
z指数：100；
高度：1.5em；
宽度：1.5em；
顶部：钙（50%-0.75em）；
字号：3em；
背景：rgba（0,0,0,0.1）；
边框：2倍实心rgba（0,0,0,0.2）；
颜色：rgba（255，255，255，0.4）；
光标：指针；
}
.btn:focus{outline:none；}
.btn:悬停{
背景：rgba（0,0,0,0.333）；
边框：2倍实心rgba（0,0,0,0.5）；
颜色：rgba（255，255，255，0.8）；
}
.btn prev{左：12.5%；}
.btn next{右：12.5%；}

Img#1
Img#2
Img#3
↺
↻
您不需要将JS单击处理程序附加到按钮上吗？如果你想让按钮悬停在桌子上，你需要给它们绝对位置，并将它们包装在相对位置容器中。事实上我对这个有点陌生。你能给我一个答案吗。谢谢。使用像datatable这样的插件怎么样？