如何获取表格表头(th)对应colgroup中指定的类名

要获取th元素对应的<col>标签类名，需要通过列索引匹配的方式关联两者，具体步骤如下：

• 第一步：获取当前th元素在所在行的列索引
  直接使用th.cellIndex即可拿到该th在<tr>中的位置索引（从0开始计数）。

• 第二步：找到表格对应的<colgroup>下的目标<col>元素
  通过th的祖先元素定位到所属表格，再获取表格内的<col>集合，用第一步拿到的索引匹配对应<col>。

• 第三步：合并th自身类名和对应col的类名
  将两者的classList合并，得到该列th实际应用的所有类名。

完整代码示例 #

// 假设已获取目标th元素
const th = document.querySelector('th.classname2');

// 1. 获取th的列索引
const colIndex = th.cellIndex;

// 2. 定位对应col元素
const table = th.closest('table');
const targetCol = table.querySelectorAll('colgroup > col')[colIndex];

// 3. 合并并去重类名
const allAppliedClasses = new Set([...th.classList, ...targetCol.classList]);
// 按需转换为数组或字符串
const classArray = Array.from(allAppliedClasses);
const classString = classArray.join(' ');

console.log(classString); // 输出 "classname2 classname1"

补充说明 #

<col>的样式会作用于整列，其排列顺序与表头th的顺序一一对应，因此通过索引匹配是最可靠的关联方式。使用Set合并类名可自动去除重复项。

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