如何用jQuery 3.2.1在表格单元格前追加带内容的列？

嘿，我帮你调整了代码，解决原代码里的结构问题，完美实现你要的在表格单元格前追加列的效果：

核心问题修正 #

你原来的代码是把<td>直接追加到按钮内部，这会破坏HTML结构。正确的做法是先定位到按钮所在的表格行，再在该行的指定位置插入新列。

完整可行代码 #

<!-- 确保已引入jQuery 3.2.1和Bootstrap 4.1.0样式 -->
<table class="table">
  <tr>
    <td><button class="btn btn-primary btn-sm motherboard">操作按钮</button></td>
    <td>原有单元格内容</td>
  </tr>
</table>

<script>
// 1. 正确选择目标按钮（注意类选择器前要加.）
const targetButton = $(".btn.btn-primary.btn-sm.motherboard");
// 2. 找到按钮所在的表格行
const targetRow = targetButton.closest('tr');
// 3. 在该行最前面追加新列
targetRow.prepend(`
  <td>
    <img src="你的图片地址" alt="图片描述" height="42" width="42">
    <a href="你的链接地址">Test Title</a>
  </td>
`);
</script>

代码说明 #

• 选择器修正：原代码$("btn.btn-primary...")缺少类选择器的前缀.，修正为$(".btn.btn-primary.btn-sm.motherboard")才能正确选中按钮。
• 定位表格行：用.closest('tr')快速找到按钮所在的父级表格行，比多层.parent()写法更简洁可靠。
• 灵活调整位置：如果不需要在行首插入，而是要在某个特定单元格前添加，可以先选中目标单元格，再用.before()方法插入新<td>。

内容的提问来源于stack exchange，提问作者Carol.Kar