jQuery技术实现：将按钮定位在当前表格行TD下方

我需要将两个按钮定位在当前激活表格行的TD下方，预期效果为按钮紧邻激活单元格的正下方，与单元格对齐显示。

尝试过的无效方案 #

• 使用$(this).next().prepend(buttons);或$(this).next().append(buttons);：按钮出现在当前激活TD的右侧单元格中，视觉效果不符合预期
• 使用$(this).append(buttons);：按钮被插入到正在编辑的单元格内部，其HTML会被保存，不可行
• 尝试在下一行表格中添加空的<td class="controls"></td>用于插入按钮，但无法准确定位到目标单元格，且源和目标单元格下一行的第一个单元格都会显示按钮

以下是我尝试过的其他jQuery代码：

$(this).next('td.controls').append(buttons); /* 无内容显示 */
$(this).next('tr td.controls').append(buttons); /* 无内容显示 */
$(this).parent().append(buttons); /* 按钮显示在表格外部之后 */
$(this).parent().prepend(buttons); /* 按钮显示在激活行第一个单元格之前 */
$(this).parent().next().prepend(buttons); /* 按钮插入到`td.controls`单元格中，但源和目标单元格均会显示 */

解决方案 #

要实现按钮在激活单元格正下方的效果，可通过动态插入控制行并精准定位按钮容器来完成：

1. 动态插入控制行并定位按钮 #

// 获取当前激活单元格及所在行
const $activeTd = $(this);
const $activeTr = $activeTd.parent();
// 检查下一行是否为已创建的控制行，避免重复插入
let $controlTr = $activeTr.next('.control-row');
if (!$controlTr.length) {
  // 创建跨所有列的控制行单元格，确保能容纳按钮容器
  const colCount = $activeTr.find('td').length;
  $controlTr = $(`<tr class="control-row"><td colspan="${colCount}"></td></tr>`).insertAfter($activeTr);
}
// 计算激活单元格相对于表格的偏移，定位按钮容器
const activeTdOffset = $activeTd.offset();
const tableOffset = $activeTd.closest('table').offset();
const $buttonContainer = $('<div class="button-container"></div>').css({
  position: 'relative',
  left: `${activeTdOffset.left - tableOffset.left}px`,
  width: `${$activeTd.width()}px`
});
// 插入按钮到容器，再将容器放入控制行单元格
$buttonContainer.append(buttons);
$controlTr.find('td').html($buttonContainer);

2. 添加样式优化显示 #

.control-row td {
  padding: 0;
}
.button-container {
  display: flex;
  gap: 8px;
  padding: 4px 0;
}

3. 失去焦点时清理控制行 #

当单元格编辑完成失去焦点后，移除对应的控制行，避免残留：

$activeTd.on('blur', function() {
  $controlTr.remove();
});

内容的提问来源于stack exchange，提问作者cheeseus