如何在HTML中封装复用表格代码 避免重复编写提升页面加载速度

你完全可以通过原生JavaScript封装渲染函数实现需求，无需重复编写表格代码，改动成本很低，适合HTML新手使用。

第一步：抽离公共配置和数据源 #

把重复的下拉选项、表格数据都抽成变量，后续如果要改选项只要改一处即可：

// 公共下拉选项
const MAIN_GAME_OPTIONS = ["MGTITLE", "ASM", "BBE", "BRC", "HPY", "RWC", "SOF", "SSP", "NOSHOW", "OTHER"]
const SIDE_GAME_OPTIONS = ["SGTITLE", "XSS", "XLR", "NOSHOW", "OTHER"]

// 表格行数据，后续加新行只要往这个数组里加对象就行
const CABINET_LIST = [
  { name: "LobbyHydra1", serial: "22000" },
  { name: "LobbyHydra2", serial: "12000" },
  { name: "LobbyOra1", serial: "3100" },
  { name: "LobbyOra2", serial: "3000" },
  { name: "LobbyPhx2", serial: "1500" },
  { name: "LobbyLibra1", serial: "7500" },
  { name: "LobbyLibra2", serial: "6000" }
]

第二步：封装表格渲染函数 #

写一个通用函数，只要传入要插入表格的DOM元素，就能自动生成完整表格：

function renderCabinetTable(container) {
  // 生成下拉选项HTML的工具函数
  function genOptions(arr) {
    return arr.map(val => `<option value="${val}">${val}</option>`).join('')
  }

  // 拼接完整表格HTML
  const tableHtml = `
  <table align="center">
    <tbody>
      <tr>
        <th>Cabinet</th>
        <th>MainGame Title</th>
        <th>SideGame Title</th>
        <th>Serial#</th>
      </tr>
    </tbody>
    <tbody>
      ${CABINET_LIST.map(item => `
        <tr>
          <td>${item.name}</td>
          <td align="center">
            <select>${genOptions(MAIN_GAME_OPTIONS)}</select>
          </td>
          <td align="center">
            <select>${genOptions(SIDE_GAME_OPTIONS)}</select>
          </td>
          <td align="center">${item.serial}</td>
        </tr>
      `).join('')}
    </tbody>
  </table>
  `

  // 插入到指定容器
  container.innerHTML = tableHtml
}

第三步：调用函数渲染表格 #

你需要在页面里放表格的位置加一个空的容器标签，比如<div id="xxx"></div>，然后在DOM加载完成后调用渲染函数即可，要渲染多少个表格就加多少个容器、调用多少次函数：

完整修改后的代码示例 #

CSS部分不需要改动，和你原来的保持一致即可，HTML整合后的代码如下：

<html>
<head>
  <title>this is a test</title>
  <link href="minimal-table.css" rel="stylesheet" type="text/css">
  <script src="//widget.time.is/?Las_Vegas_z14e&amp;t=1630524814449"></script>
</head>
<body>
  <center>
    <h1>Tuesday Demo Setup</h1>
    <img src="aries.png" alt="arieslogo" class="center">
    <a href="https://time.is/Las_Vegas" id="time_is_link" rel="nofollow" style="font-size:16px">Current Time:</a>
    <span id="Las_Vegas_z14e" style="font-size:16px"><span onclick="location='http://time.is/'" title="http://time.is/">12:35:48</span></span>
    <script src="//widget.time.is/t.js"></script>
    <script>
      time_is_widget.init({
        Las_Vegas_z14e: {}
      });
    </script>
    <p></p>
    Only <span id="time">02:24:12</span> until the meeting!
    <h3>Important meeting is at 3:00pm in the lobby. Don't be late!</h3>
    <script>
      (function() {
        var start = new Date;
        start.setHours(15, 0, 0);

        function pad(num) {
          return ("0" + parseInt(num)).substr(-2);
        }

        function tick() {
          var now = new Date;
          if (now > start) {
            start.setDate(start.getDate() + 1);
          }
          var remain = ((start - now) / 1000);
          var hh = pad((remain / 60 / 60) % 60);
          var mm = pad((remain / 60) % 60);
          var ss = pad(remain % 60);
          document.getElementById('time').innerHTML =
            hh + ":" + mm + ":" + ss;
          setTimeout(tick, 1000);
        }

        document.addEventListener('DOMContentLoaded', tick);
      })();
    </script>
    Please use this form to inform us what you want to see loaded on the cabinets.
  </center>
  <br><br>
  <form>
    <!-- 表单内表格容器 -->
    <div id="form-table"></div>
    <p></p>
    <textarea id="notes" name="notes" placeholder="tell us something nice" cols="44" rows="10" class="center"></textarea>
    <p></p>
    <button class="center">Submit request</button>
    <p></p>
    <input class="center" type="reset" value="Reset">
  </form>

  <!-- 其他位置要加表格就加对应容器即可，比如页脚位置的表格 -->
  <div id="footer-table" style="margin-top: 50px;"></div>

  <script>
    // 公共下拉选项
    const MAIN_GAME_OPTIONS = ["MGTITLE", "ASM", "BBE", "BRC", "HPY", "RWC", "SOF", "SSP", "NOSHOW", "OTHER"]
    const SIDE_GAME_OPTIONS = ["SGTITLE", "XSS", "XLR", "NOSHOW", "OTHER"]

    // 表格行数据
    const CABINET_LIST = [
      { name: "LobbyHydra1", serial: "22000" },
      { name: "LobbyHydra2", serial: "12000" },
      { name: "LobbyOra1", serial: "3100" },
      { name: "LobbyOra2", serial: "3000" },
      { name: "LobbyPhx2", serial: "1500" },
      { name: "LobbyLibra1", serial: "7500" },
      { name: "LobbyLibra2", serial: "6000" }
    ]

    // 表格渲染函数
    function renderCabinetTable(container) {
      function genOptions(arr) {
        return arr.map(val => `<option value="${val}">${val}</option>`).join('')
      }
      const tableHtml = `
      <table align="center">
        <tbody>
          <tr>
            <th>Cabinet</th>
            <th>MainGame Title</th>
            <th>SideGame Title</th>
            <th>Serial#</th>
          </tr>
        </tbody>
        <tbody>
          ${CABINET_LIST.map(item => `
            <tr>
              <td>${item.name}</td>
              <td align="center">
                <select>${genOptions(MAIN_GAME_OPTIONS)}</select>
              </td>
              <td align="center">
                <select>${genOptions(SIDE_GAME_OPTIONS)}</select>
              </td>
              <td align="center">${item.serial}</td>
            </tr>
          `).join('')}
        </tbody>
      </table>
      `
      container.innerHTML = tableHtml
    }

    // 页面加载完成后渲染所有表格
    document.addEventListener('DOMContentLoaded', function() {
      // 渲染表单里的表格
      renderCabinetTable(document.getElementById('form-table'))
      // 渲染页脚的表格，要加多少个就调用多少次
      renderCabinetTable(document.getElementById('footer-table'))
    })
  </script>
</body>
</html>

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