使用JavaScript隐藏HTML表格中未选中日期的列内容

直接把逻辑嵌入你现有的myFunction搜索流程即可，不需要额外写独立函数，整体改动分为三步：

1. 先建立选中值和表格列的映射关系 #

DOM中表格的列索引是从0开始计数的，你原本定义的“周一对应表格第1列、周二对应第2列…周五对应第5列”需要先转成JS可识别的索引，避免遍历错位：

• 在函数开头读取下拉框mySelect的选中值，通过映射表拿到对应的实际列索引：

// 按需调整索引值：如果你的表格第一列是「市场名称」这类非日期列，对应列的索引要往后偏移1位
const colIndexMap = {
  '周一': 0, // 表格第1列（从0开始计数）
  '周二': 1, // 表格第2列
  '周三': 2, // 表格第3列
  '周四': 3, // 表格第4列
  '周五': 4  // 表格第5列
}
const selectedDate = document.getElementById('mySelect').value
const targetCol = colIndexMap[selectedDate]

2. 批量控制所有列的显示状态 #

拿到目标列索引后，遍历目标表格A110的所有行、所有单元格，把非目标列全部隐藏，目标列保持显示：

const targetTable = document.getElementById('A110')
// 遍历表格所有行（包含表头行）
for (const row of targetTable.rows) {
  // 遍历当前行的每个单元格
  for (let idx = 0; idx < row.cells.length; idx++) {
    const cell = row.cells[idx]
    cell.style.display = idx === targetCol ? '' : 'none'
  }
}

3. 衔接原有关键词搜索逻辑 #

原来的关键词匹配逻辑不需要重构，只需要把匹配范围收窄到选中的目标列就行，避免其他已隐藏列的文本干扰匹配结果：

const searchKey = document.getElementById('myInput').value.trim()
// 遍历数据行做关键词过滤
for (const row of targetTable.rows) {
  // 如果是表头行就跳过，保持表头的目标列正常显示
  if (row.rowIndex === 0) continue
  // 只取目标列的文本做关键词匹配
  const cellContent = row.cells[targetCol]?.textContent || ''
  // 不匹配的行直接整行隐藏
  row.style.display = cellContent.includes(searchKey) ? '' : 'none'
}

常见踩坑提醒：如果你的表格有跨列合并的结构，靠固定索引计数很容易错位，这时候可以给每个日期对应的单元格加统一的自定义属性，比如给周一列的单元格加data-col="周一"、周二列的加data-col="周二"，直接通过属性选择器匹配控制显示隐藏，比索引计数稳定很多。

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