如何使用Vanilla JS修改指定无IDtd元素的colspan属性

你可以通过原生JS直接定位目标元素并修改属性，这里有两种简洁的实现方式：

方法一：直接用复合CSS选择器定位目标td #

利用querySelectorAll匹配所有位于带foodtablesupper属性的tr下的.subheader类td，然后遍历修改它们的colspan属性：

// 获取所有目标td元素
const targetTds = document.querySelectorAll('tr[foodtablesupper] td.subheader');

// 遍历每个元素修改colspan
targetTds.forEach(td => {
  td.colSpan = 4;
  // 也可以用setAttribute：td.setAttribute('colspan', '4');
});

注：colSpan是DOM元素的属性名（驼峰式），和HTML属性的colspan对应，两种修改方式都有效，直接修改DOM属性更高效。

方法二：先定位tr再查找内部td #

如果需要更明确的层级控制，可以先找到所有带foodtablesupper属性的tr，再逐个获取内部的td：

// 获取所有目标tr元素
const targetTrs = document.querySelectorAll('tr[foodtablesupper]');

// 遍历每个tr，找到内部的.subheader td并修改属性
targetTrs.forEach(tr => {
  const td = tr.querySelector('td.subheader');
  if (td) { // 确保找到td再修改，避免报错
    td.colSpan = 4;
  }
});

这两种方法都能精准定位到你需要修改的td元素，无需依赖任何第三方库，纯原生JS即可完成。

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