如何用JavaScript在表格右侧动态添加带按钮的合并列

• 核心逻辑：利用<td>的rowspan属性实现tbody区域整列合并，仅需在tbody首行插入1个设置了对应行数rowspan的单元格，无需给其余行新增单元格，即可达成整列合并效果。
• 可运行代码示例：

// 替换为你页面中目标表格的选择器
const targetTable = document.querySelector('#your-table-id')

// 新增表头单元格
const lastHeaderRow = targetTable.querySelector('thead tr:last-child')
const opHeader = document.createElement('th')
opHeader.innerText = '操作'
lastHeaderRow.appendChild(opHeader)

// 处理tbody合并单元格
const tableTbody = targetTable.querySelector('tbody')
// 统计tbody总行数，作为rowspan值
const totalRowNum = tableTbody.rows.length
const mergedCol = document.createElement('td')
mergedCol.rowSpan = totalRowNum

// 插入自定义按钮
const actionBtn = document.createElement('button')
actionBtn.innerText = '功能按钮'
actionBtn.classList.add('custom-btn') // 可自定义类名写样式
actionBtn.addEventListener('click', function() {
  // 此处写入按钮点击后的业务逻辑
  console.log('按钮触发点击事件')
})
mergedCol.appendChild(actionBtn)

// 将合并单元格插入到tbody首行末尾
tableTbody.rows[0].appendChild(mergedCol)

• 注意事项：
  • 若表格存在多个独立tbody，需逐个遍历每个tbody，分别统计当前tbody的行数、插入对应rowspan的合并单元格。
  • 如果表头存在单元格跨列情况，可同步给新增的th设置colspan属性，避免列错位。
  • 按钮样式可通过给元素添加自定义类名，在CSS中自行定义即可。

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