如何使用jQuery为HTML表格内指定的成对td添加tr标签进行包裹？

解决方案 #

你不要尝试单独插入<tr>起始标签或者</tr>闭合标签实现包裹效果，浏览器的DOM是节点树结构，不是纯文本字符串，插入单个半标签时浏览器会自动补全，无法达到把两个td包裹进同一行的效果，直接使用jQuery的wrapAll()方法就能实现需求，该方法可以将多个选中元素整体包裹到同一个父元素中。

方案1：按顺序两两分组（适合你当前的固定结构）

// 等待DOM加载完成后执行
$(document).ready(function() {
  // 获取表格下所有td节点
  const allTd = $('#tlist tbody').find('td');
  // 步长为2遍历，每两个td为一组
  for (let i = 0; i < allTd.length; i += 2) {
    // 截取当前组的两个td，整体包裹<tr>
    allTd.slice(i, i + 2).wrapAll('<tr></tr>');
  }
});

方案2：按特征匹配分组（更稳妥，适配结构变化场景）

完全匹配你描述的分组规则：前一个td包含.inline-flex元素，后一个td包含.dlink.anim元素，不会受其他额外td节点干扰：

$(document).ready(function() {
  // 选中所有包含.inline-flex的td（每组第一个td）
  $('#tlist tbody td:has(.inline-flex)').each(function() {
    // 选中当前td + 相邻的符合要求的下一个td
    const group = $(this).add($(this).next('td:has(.dlink.anim)'));
    // 包裹为同一行
    group.wrapAll('<tr></tr>');
  });
});

执行以上任意一段代码后，你的表格结构就会变成每两个td为一行的标准表格结构。

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