如何通过修改单个标签直接转换<th>为<td>？及批量选中<th>的实现方法

问题1：如何通过修改单个标签直接将标签转换为标签？ #

代码编辑器批量转换（静态修改） #

如果是在本地代码里批量替换，直接用编辑器的正则替换功能就能快速完成：

• 查找匹配：<th>，替换为：<td>
• 查找匹配：</th>，替换为：</td>

运行时通过父容器标签触发转换（动态修改） #

如果要在浏览器运行时，仅修改单个父标签就完成所有<th>到<td>的转换，可以给目标表格添加自定义属性，配合一段JavaScript实现：

1. 给需要转换的<table>标签添加data-convert-th-to-td属性：

<table data-convert-th-to-td>
  <tr><th>原表头</th></tr>
</table>

2. 添加以下JS代码（可放在页面底部）：

const targetTable = document.querySelector('table[data-convert-th-to-td]');
if (targetTable) {
  // 遍历所有<th>标签
  targetTable.querySelectorAll('th').forEach(th => {
    const td = document.createElement('td');
    // 复制<th>的内容和所有属性
    td.innerHTML = th.innerHTML;
    Array.from(th.attributes).forEach(attr => td.setAttribute(attr.name, attr.value));
    // 替换标签
    th.replaceWith(td);
  });
  // 移除标记属性避免重复执行
  targetTable.removeAttribute('data-convert-th-to-td');
}

这样你只需要修改<table>这一个标签，就能自动把表格内所有<th>转换成<td>。

问题2：现有一组标签，希望仅通过修改单个标签来一次性选中所有标签，该如何操作？ #

这里的“选中”分为样式选中（CSS）和DOM元素选中（JS）两种场景：

场景1：CSS样式选中（高亮/标记） #

利用CSS的:has()选择器（现代浏览器支持），只需给目标<td>添加自定义属性，就能关联选中所有<th>：

1. 修改目标<td>，添加data-select-all-ths属性：

<td data-select-all-ths>触发选中所有TH</td>

2. 添加CSS规则：

/* 选中与该<td>同表格内的所有<th> */
table:has(td[data-select-all-ths]) th {
  outline: 2px solid #2196F3; /* 蓝色边框标记选中 */
  background-color: #E3F2FD; /* 浅蓝背景高亮 */
}

只要这个<td>存在于某个表格中，该表格内的所有<th>都会被自动选中并应用样式。

场景2：JavaScript DOM选中（操作元素） #

通过给目标<td>添加触发逻辑，点击或页面加载时选中所有<th>：

• 方式1：点击<td>触发选中
  修改目标<td>添加onclick事件：

<td onclick="document.querySelectorAll('th').forEach(th => {
  th.classList.add('selected');
  // 可选：模拟鼠标选中状态
  th.focus();
})">点击选中所有TH</td>

• 方式2：页面加载时自动选中
  给目标<td>添加data-auto-select-ths属性：

<td data-auto-select-ths></td>

添加JS代码：

const triggerTd = document.querySelector('td[data-auto-select-ths]');
if (triggerTd) {
  const allThs = document.querySelectorAll('th');
  allThs.forEach(th => {
    th.classList.add('selected');
    // 可执行其他选中操作，比如获取元素内容、修改属性等
  });
}

两种方式都只需修改单个<td>标签，就能一次性选中所有<th>元素。

内容的提问来源于stack exchange，提问作者Engineer Saqlain Ahmad