如何使用JavaScript Object配合Bootstrap Tables实现新冠疫情数据表格展示

原方案不可行，存在如下问题 #

• ID重复违规：HTML规范要求同一个ID在页面中只能出现一次，原代码中cases/newCases/death/newDeath四个ID被多个单元格复用，会导致JS选择元素异常，无法正确赋值
• 执行顺序错误：JS代码先执行DOM赋值操作，后定义数据数组，此时cases等变量未定义，直接报错无法渲染
• 数据结构与DOM不匹配：现有dailyOverview仅存储了单组单日数据，而表格表头为多省份列，数据维度和表格结构无法对应
• DOM加载时机问题：如果脚本不是放在body最末尾，DOM未渲染完成就执行getElementById会获取到空值

正确实现步骤 #

1. 修正HTML结构（移除重复ID，增加属性标识） #

<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">统计指标</th>
      <th scope="col">Quebec</th>
      <th scope="col">Ontario</th>
      <th scope="col">Manitoba</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">累计确诊</th>
      <td data-province="quebec" data-metric="cases"></td>
      <td data-province="ontario" data-metric="cases"></td>
      <td data-province="manitoba" data-metric="cases"></td>
    </tr>
    <tr>
      <th scope="row">新增确诊</th>
      <td data-province="quebec" data-metric="newCases"></td>
      <td data-province="ontario" data-metric="newCases"></td>
      <td data-province="manitoba" data-metric="newCases"></td>
    </tr>
    <tr>
      <th scope="row">累计死亡</th>
      <td data-province="quebec" data-metric="death"></td>
      <td data-province="ontario" data-metric="death"></td>
      <td data-province="manitoba" data-metric="death"></td>
    </tr>
    <tr>
      <th scope="row">新增死亡</th>
      <td data-province="quebec" data-metric="newDeath"></td>
      <td data-province="ontario" data-metric="newDeath"></td>
      <td data-province="manitoba" data-metric="newDeath"></td>
    </tr>
  </tbody>
</table>

2. 调整JS代码（先定义数据，后操作DOM） #

// 定义所有省份的统计数据，可根据实际数据源更新
const covidData = {
  quebec: {
    cases: 395155,
    newCases: 703,
    death: 11297,
    newDeath: 1
  },
  ontario: {
    cases: 592341,
    newCases: 856,
    death: 9872,
    newDeath: 3
  },
  manitoba: {
    cases: 62189,
    newCases: 124,
    death: 1248,
    newDeath: 0
  }
}

// 等DOM完全加载后再执行赋值操作
document.addEventListener('DOMContentLoaded', () => {
  // 遍历所有带标识的单元格赋值
  document.querySelectorAll('[data-province][data-metric]').forEach(cell => {
    const province = cell.dataset.province
    const metric = cell.dataset.metric
    cell.textContent = covidData[province][metric]
  })
})

3. 脚本引入位置 #

将<script src="/module/index.js"></script>放在</body>标签之前，避免DOM未加载完成的问题。

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