基于星期几动态显示/隐藏HTML表格列（HTML/JS/jQuery实现）

修改你的JavaScript函数，添加列隐藏逻辑，即可实现需求。完整代码如下：

HTML #

<body onload="injectDay()">
  <div>
    <h3 class="dayContainer"></h3>
    <table>
      <tr>
        <td>Time</td>
        <td>Sunday</td>
        <td>Monday</td>
        <td>Tuesday</td>
        <td>Wednesday</td>
        <td>Thursday</td>
        <td>Friday</td>
        <td>Saturday</td>
        <td>Sunday</td>
        <td>Monday</td>
      </tr>
      <tr>
        <td>8to9</td>
        <td>df</td>
        <td>rer</td>
        <td>jkhj</td>
        <td>er</td>
        <td>dfdf</td>
        <td>thh</td>
        <td>trttt</td>
        <td>dffs</td>
        <td>dfd</td>
      </tr>
      <tr>
        <td>9to10</td>
        <td>fdf</td>
        <td>jjj</td>
        <td>hj</td>
        <td>re</td>
        <td>ffee</td>
        <td>ffgs</td>
        <td>juff</td>
        <td>gfdd</td>
        <td>hjj</td>
      </tr>
      <tr>
        <td>10to11</td>
        <td>fdf</td>
        <td>gffg</td>
        <td>gh</td>
        <td>jjjj</td>
        <td>fdf</td>
        <td>kgfg</td>
        <td>fdff</td>
        <td>rrtt</td>
        <td>ghfd</td>
      </tr>
      <tr>
        <td>11to12</td>
        <td>fdf</td>
        <td>gg</td>
        <td>gh</td>
        <td>gfgf</td>
        <td>fdf</td>
        <td>trrr</td>
        <td>rtrw</td>
        <td>fdf</td>
        <td>fdf</td>
      </tr>
    </table>
  </div>
</body>

CSS #

.table-responsive{
  height:180px; width:50%;
  overflow-y: auto;
  border:2px solid #444;
}
.table-responsive:hover{border-color:red;}
table{width:100%;}
td{padding:24px; background:#eee;}
.hidden { display: none; }

JavaScript #

function injectDay() {
  var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  var date = new Date();
  var currentDay = days[date.getDay()];
  document.querySelector('.dayContainer').innerHTML = currentDay;

  // 获取表格所有行
  const rows = document.querySelectorAll('table tr');
  
  rows.forEach(row => {
    // 获取当前行的所有单元格
    const cells = row.querySelectorAll('td');
    cells.forEach((cell, index) => {
      // 第一列（时间列）始终显示
      if (index === 0) {
        cell.classList.remove('hidden');
        return;
      }
      // 判断单元格文本是否匹配当前星期，不匹配则隐藏
      if (cell.textContent.trim() !== currentDay) {
        cell.classList.add('hidden');
      } else {
        cell.classList.remove('hidden');
      }
    });
  });
}

关键逻辑说明 #

1. 获取当前星期的名称后，遍历表格的每一行
2. 每行的第一列（时间列）保持显示，不做隐藏处理
3. 对其他列，判断单元格文本是否等于当前星期：
   • 不匹配则添加hidden类隐藏该单元格
   • 匹配则移除hidden类确保显示

这样就能实现「当天是星期几，仅显示对应星期的所有列，其余列隐藏」的效果，包括表格中重复出现的星期列也会被正确处理。

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