一、实现效果说明表格每一行【删除按钮】点击后弹窗跟随当前行删除按钮上方弹出每行独立弹窗互不干扰点击其他行删除时自动关闭上一行弹窗只展示当前行确认框。核心布局原理子绝父相二、布局思路拆解HTML 渲染阶段每一行操作 td 内部同时渲染删除按钮 删除弹窗二者是同级兄弟元素CSS 布局包裹二者的 设置 position:relative父相删除弹窗 .delete_alert 设置 position:absolute子绝通过 top / right 调整偏移把弹窗摆放到删除按钮上方默认 display:none 隐藏⚠️关键点如果父容器不设置relativeabsolute 弹窗会向上寻找有定位的祖先弹窗位置错乱跑到页面左上角 / 其他区域。三、完整代码实现1CSS 样式 Delete.csscss/* 删除确认弹窗样式//弹窗容器位置交给JS控制/.delete_alert {width: 200px;background-color: #ffffff;border-radius: 4px;position: absolute; /子绝/top: -74px; /向上偏移摆到删除按钮上方/right: 64px; /向右偏移/display: none; /默认隐藏弹窗/z-index: 9999; /高层级防止被表格遮挡/box-shadow: 0 2px 12px rgba(0,0,0,0.12);}.delete_name {font-size: 18px;font-weight: 700;margin-left: 20px;padding-top: 20px;}.delete_text {display: flex;align-items: center;margin: 8px;font-size: 21px;justify-content: center;}.delete_text img {width: 20px;margin-right: 10px;}.delete_but {display: flex;justify-content: center;padding: 10px 0;}/取消按钮 和 确认按钮 公共样式/.delete_error,.delete_affirm {width: 60px;height: 29px;background: #fff;border: 1px solid #0000001c;border-radius: 3px;margin: 0 10px;cursor: pointer;}/确认按钮单独样式/.delete_affirm {background-color: #0080ff;color: #ffffff;}/鼠标悬浮按钮样式 */.delete_error:hover,.delete_affirm:hover {background-color: #0080ff;color: #fff;}额外补充操作列 td 必须加上相对定位csstable td {position: relative; /父相必不可少/}2JS 表格动态渲染拼接 HTMLjavascript运行// 获取商品分类接口数据渲染表格function tabledata(data) {let html ‘’;for (let i 0; i data.length; i) {let item data[i];html tr td classcell_check input typecheckbox classitem_checkbox value${item.id} /td td${item.id}/td td classtopt title${item.title}${item.title}/td td${item.createtime}/td td !-- 跟随弹窗和删除按钮放在同一个td平级兄弟 -- div classdelete_alert div classdelete_text divimg src../../img/ui/hint.png alt/div div是否删除此条数据/div /div div classdelete_but button classdelete_affirm确认/button button classdelete_error取消/button /div /div button classbluet>(.deletealert).show()→所有行弹窗同时弹出❌动态渲染DOM后直接绑定click事件不用事件委托(.delete_alert).show() → 所有行弹窗同时弹出 ❌ 动态渲染 DOM 后直接绑定 click 事件不用事件委托(.deletealert).show()→所有行弹窗同时弹出❌动态渲染DOM后直接绑定click事件不用事件委托(document).on()→ 新渲染表格行点击删除无响应❌ 混淆siblings和closest选错 DOM 查找方法弹窗无法关闭 / 显示六、拓展优化可选方案点击页面空白处自动关闭弹窗增加弹窗淡入淡出动画多条批量删除逻辑改造防止多次重复点击确认按钮增加 loading 禁用。
jQuery 表格行跟随式删除确认弹窗实现方案（子绝父相行内悬浮弹窗）
一、实现效果说明表格每一行【删除按钮】点击后弹窗跟随当前行删除按钮上方弹出每行独立弹窗互不干扰点击其他行删除时自动关闭上一行弹窗只展示当前行确认框。核心布局原理子绝父相二、布局思路拆解HTML 渲染阶段每一行操作 td 内部同时渲染删除按钮 删除弹窗二者是同级兄弟元素CSS 布局包裹二者的 设置 position:relative父相删除弹窗 .delete_alert 设置 position:absolute子绝通过 top / right 调整偏移把弹窗摆放到删除按钮上方默认 display:none 隐藏⚠️关键点如果父容器不设置relativeabsolute 弹窗会向上寻找有定位的祖先弹窗位置错乱跑到页面左上角 / 其他区域。三、完整代码实现1CSS 样式 Delete.csscss/* 删除确认弹窗样式//弹窗容器位置交给JS控制/.delete_alert {width: 200px;background-color: #ffffff;border-radius: 4px;position: absolute; /子绝/top: -74px; /向上偏移摆到删除按钮上方/right: 64px; /向右偏移/display: none; /默认隐藏弹窗/z-index: 9999; /高层级防止被表格遮挡/box-shadow: 0 2px 12px rgba(0,0,0,0.12);}.delete_name {font-size: 18px;font-weight: 700;margin-left: 20px;padding-top: 20px;}.delete_text {display: flex;align-items: center;margin: 8px;font-size: 21px;justify-content: center;}.delete_text img {width: 20px;margin-right: 10px;}.delete_but {display: flex;justify-content: center;padding: 10px 0;}/取消按钮 和 确认按钮 公共样式/.delete_error,.delete_affirm {width: 60px;height: 29px;background: #fff;border: 1px solid #0000001c;border-radius: 3px;margin: 0 10px;cursor: pointer;}/确认按钮单独样式/.delete_affirm {background-color: #0080ff;color: #ffffff;}/鼠标悬浮按钮样式 */.delete_error:hover,.delete_affirm:hover {background-color: #0080ff;color: #fff;}额外补充操作列 td 必须加上相对定位csstable td {position: relative; /父相必不可少/}2JS 表格动态渲染拼接 HTMLjavascript运行// 获取商品分类接口数据渲染表格function tabledata(data) {let html ‘’;for (let i 0; i data.length; i) {let item data[i];html tr td classcell_check input typecheckbox classitem_checkbox value${item.id} /td td${item.id}/td td classtopt title${item.title}${item.title}/td td${item.createtime}/td td !-- 跟随弹窗和删除按钮放在同一个td平级兄弟 -- div classdelete_alert div classdelete_text divimg src../../img/ui/hint.png alt/div div是否删除此条数据/div /div div classdelete_but button classdelete_affirm确认/button button classdelete_error取消/button /div /div button classbluet>(.deletealert).show()→所有行弹窗同时弹出❌动态渲染DOM后直接绑定click事件不用事件委托(.delete_alert).show() → 所有行弹窗同时弹出 ❌ 动态渲染 DOM 后直接绑定 click 事件不用事件委托(.deletealert).show()→所有行弹窗同时弹出❌动态渲染DOM后直接绑定click事件不用事件委托(document).on()→ 新渲染表格行点击删除无响应❌ 混淆siblings和closest选错 DOM 查找方法弹窗无法关闭 / 显示六、拓展优化可选方案点击页面空白处自动关闭弹窗增加弹窗淡入淡出动画多条批量删除逻辑改造防止多次重复点击确认按钮增加 loading 禁用。
