使用JavaScript循环在SharePoint列表中移除表格标签并保留<td>innerHTML

需求：我有一个SharePoint列表表格，需要移除所有<td>标签，将每个<td>内的内容直接放到父元素中（解除嵌套），以此方便自定义内容的UI样式。当前代码仅能处理单个<td>，需要实现循环逻辑完成批量处理。

原代码（仅处理单个元素） #

/* Code Start */

var tableTags = document.querySelector('.ms-listviewtable td');

// get the element's parent node

var parent = tableTags.parentNode;

// move all children out of the element

while (tableTags.firstChild) parent.insertBefore(tableTags.firstChild, tableTags);

// remove the empty element

parent.removeChild(tableTags);

/* Code End */

批量处理解决方案代码 #

// 获取所有目标td元素
var tdElements = document.querySelectorAll('.ms-listviewtable td');

// 转为数组并遍历处理每个td
Array.from(tdElements).forEach(td => {
  const parent = td.parentNode;
  // 将td的所有子节点移动到父节点中，放在当前td的前方
  while (td.firstChild) {
    parent.insertBefore(td.firstChild, td);
  }
  // 移除空的td标签
  parent.removeChild(td);
});

代码说明： #

• 替换querySelector为querySelectorAll，获取.ms-listviewtable下的所有<td>元素（返回NodeList集合）
• 通过Array.from()将NodeList转换为数组，方便使用forEach进行遍历操作
• 对每个<td>重复原逻辑：移动内部所有子节点到父元素、移除空的<td>标签
• 此逻辑会批量处理所有目标<td>，保留原有内容的同时解除表格标签嵌套

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