如何用querySelector选择colSpan/rowSpan大于1的表格单元格？

CSS属性选择器无法直接实现数值大小比较，所以querySelectorAll('td[colspan>"1"]')这类写法是不生效的。要达成需求，得结合JavaScript做过滤处理：

方法一：遍历所有td后筛选 #

// 获取页面中所有td元素
const allTds = document.querySelectorAll('td');
// 过滤出colspan或rowspan大于1的单元格
const targetCells = Array.from(allTds).filter(cell => {
  // 将属性值转为数字，未设置属性时默认值为1
  const colspanNum = parseInt(cell.getAttribute('colspan')) || 1;
  const rowspanNum = parseInt(cell.getAttribute('rowspan')) || 1;
  return colspanNum > 1 || rowspanNum > 1;
});

方法二：先缩小范围再筛选 #

如果页面里大部分td都没有colspan/rowspan属性，可以先只获取带这两个属性的td，再做过滤，效率更高：

// 先获取带有colspan或rowspan属性的td
const candidateCells = document.querySelectorAll('td[colspan], td[rowspan]');
// 筛选出属性值大于1的单元格
const targetCells = Array.from(candidateCells).filter(cell => {
  // 直接使用元素的驼峰式属性，本身就是数字类型，未设置时默认值为1
  return cell.colSpan > 1 || cell.rowSpan > 1;
});

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