时间戳

首页 > 解决方案 > Is there a way I can call have the info on a table in a function or class that can be called multiple times in HTML?

javascript - Is there a way I can call have the info on a table in a function or class that can be called multiple times in HTML?

问题描述

If you look at the HTML code, you will see I have info to display on a table but I'm placing the code over and over to get what I want.

Is there a way to have the code for the table once and just call it again in a class or something to save loading time on the tool I'm working on?

html {
  font-family: sans-serif;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(200, 200, 200);
  letter-spacing: 1px;
  font-size: 0.8rem;
}

td,
th {
  border: 1px solid rgb(190, 190, 190);
  padding: 10px 20px;
}

th {
  background-color: rgb(235, 235, 235);
}

td {
  text-align: center;
}

tr:nth-child(even) td {
  background-color: rgb(250, 250, 250);
}

tr:nth-child(odd) td {
  background-color: rgb(245, 245, 245);
}

caption {
  padding: 10px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}
<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) { // too late, go to tomorrow
            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>
    <table align="center">
      <tbody>
        <tr>
          <th>Cabinet</th>
          <th>MainGame Title</th>
          <th>SideGame Title</th>
          <th>Serial#</th>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>LobbyHydra1</td>
          <td align="center">
            <select>
              <option value="MGTITLE">MGTITLE</option>
              <option value="ASM">ASM</option>
              <option value="BBE">BBE</option>
              <option value="BRC">BRC</option>
              <option value="HPY">HPY</option>
              <option value="RWC">RWC</option>
              <option value="SOF">SOF</option>
              <option value="SSP">SSP</option>
              <option value="NOSHOW">NOSHOW</option>
              <option value="OTHER">OTHER</option>
            </select>
          </td>
          <td align="center">
            <select>
              <option value="SGTITLE">SGTITLE</option>
              <option value="XSS">XSS</option>
              <option value="XLR">XLR</option>
              <option value="NOSHOW">NOSHOW</option>
              <option value="OTHER">OTHER</option>
            </select>
          </td>
          <td align="center">
            22000
          </td>
        </tr>
        <tr>
          <td>LobbyHydra2</td>
          <td align="center">
            <select>
              <option value="MGTITLE">MGTITLE</option>
              <option value="ASM">ASM</option>
              <option value="BBE">BBE</option>
              <option value="BRC">BRC</option>
              <option value="HPY">HPY</option>
              <option value="RWC">RWC</option>
              <option value="SOF">SOF</option>
              <option value="SSP">SSP</option>
              <option value="NOSHOW">NOSHOW</option>
              <option value="OTHER">OTHER</option>
            </select>
          </td>
          <td align="center">
            <select>
              <option value="SGTITLE">SGTITLE</option>
              <option value="XSS">XSS</option>
              <option value="XLR">XLR</option>
              <option value="NOSHOW">NOSHOW</option>
              <option value="OTHER">OTHER</option>
            </select>
          </td>
          <td align="center">
            12000
          </td>
        </tr>
        <tr>
          <td>LobbyOra1</td>
          <td align="center">
            <select>
              <option value="MGTITLE">MGTITLE</option>
              <option value="ASM">ASM</option>
              <option value="BBE">BBE</option>
              <option value="BRC">BRC</option>
              <option value="HPY">HPY</option>
              <option value="RWC">RWC</option>
              <option value="SOF">SOF</option>
              <option value="SSP">SSP</option>
              <option value="NOSHOW">NOSHOW</option>
              <option value="OTHER">OTHER</option>
            </select>
          </td>
          <td align="center">
            <select>
              <option value="SGTITLE">SGTITLE</option>
              <option value="XSS">XSS</option>
              <option value="XLR">XLR</option>
              <option value="NOSHOW">NOSHOW</option>
              <option value="OTHER">OTHER</option>
            </select>
          </td>
          <td align="center">
            3100
          </td>
        </tr>
        <tr>
          <td>LobbyOra2</td>
          <td align="center">
            <select>
              <option value="MGTITLE">MGTITLE</option>
              <option value="ASM">ASM</option>
              <option value="BBE">BBE</option>
              <option value="BRC">BRC</option>
              <option value="HPY">HPY</option>
              <option value="RWC">RWC</option>
              <option value="SOF">SOF</option>
              <option value="SSP">SSP</option>
              <option value="NOSHOW">NOSHOW</option>
              <option value="OTHER">OTHER</option>
            </select>
          </td>
          <td align="center">
            <select>
              <option value="SGTITLE">SGTITLE</option>
              <option value="XSS">XSS</option>
              <option value="XLR">XLR</option>
              <option value="NOSHOW">NOSHOW</option>
              <option value="OTHER">OTHER</option>
            </select>
          </td>
          <td align="center">
            3000
          </td>
        </tr>
        <tr>
          <td>LobbyPhx2</td>
          <td align="center">
            <select>
              <option value="MGTITLE">MGTITLE</option>
              <option value="ASM">ASM</option>
              <option value="BBE">BBE</option>
              <option value="BRC">BRC</option>
              <option value="HPY">HPY</option>
              <option value="RWC">RWC</option>
              <option value="SOF">SOF</option>
              <option value="SSP">SSP</option>
              <option value="NOSHOW">NOSHOW</option>
              <option value="OTHER">OTHER</option>
            </select>
          </td>
          <td align="center">
            <select>
              <option value="SGTITLE">SGTITLE</option>
              <option value="XSS">XSS</option>
              <option value="XLR">XLR</option>
              <option value="NOSHOW">NOSHOW</option>
              <option value="OTHER">OTHER</option>
            </select>
          </td>
          <td align="center">
            1500
          </td>
        </tr>
        <tr>
          <td>LobbyLibra1</td>
          <td align="center">
            <select>
              <option value="MGTITLE">MGTITLE</option>
              <option value="ASM">ASM</option>
              <option value="BBE">BBE</option>
              <option value="BRC">BRC</option>
              <option value="HPY">HPY</option>
              <option value="RWC">RWC</option>
              <option value="SOF">SOF</option>
              <option value="SSP">SSP</option>
              <option value="NOSHOW">NOSHOW</option>
              <option value="OTHER">OTHER</option>
            </select>
          </td>
          <td align="center">
            <select>
              <option value="SGTITLE">SGTITLE</option>
              <option value="XSS">XSS</option>
              <option value="XLR">XLR</option>
              <option value="NOSHOW">NOSHOW</option>
              <option value="OTHER">OTHER</option>
            </select>
          </td>
          <td align="center">
            7500
          </td>
        </tr>
        <tr>
          <td>LobbyLibra2</td>
          <td align="center">
            <select>
              <option value="MGTITLE">MGTITLE</option>
              <option value="ASM">ASM</option>
              <option value="BBE">BBE</option>
              <option value="BRC">BRC</option>
              <option value="HPY">HPY</option>
              <option value="RWC">RWC</option>
              <option value="SOF">SOF</option>
              <option value="SSP">SSP</option>
              <option value="NOSHOW">NOSHOW</option>
              <option value="OTHER">OTHER</option>
            </select>
          </td>
          <td align="center">
            <select>
              <option value="SGTITLE">SGTITLE</option>
              <option value="XSS">XSS</option>
              <option value="XLR">XLR</option>
              <option value="NOSHOW">NOSHOW</option>
              <option value="OTHER">OTHER</option>
            </select>
          </td>
          <td align="center">
            6000
          </td>
        </tr>
        <tr></tr>
      </tbody>
    </table>
    <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>
</body>

</html>

So what I am trying to do is to have the table info list multiple times without having the raw code placed multiple times. I am a noob when it comes to HTML

标签： javascripthtmlcss

解决方案

让我们抽象一下你的问题。
除了标题之外，表格的每一行都由四列组成：

  1. 列中的变量字符串Cabinet
  2. 列中的选项列表MainGame Title （每一行都相同！）
  3. 列中的选项列表SideGame Title （每一行都相同！）
  4. 列中的变量字符串Serial#

因此，每一行都可以由具有以下接口的函数写入：

function addRowToTable(tableID, cabinetName, serial);

我在 JavaScript 中定义了它，尽管 PHP 也可以这样做，因为它是一种您已经在页面中使用的语言。
此功能必须：

  1. 在您的 HTML 代码中访问表格（使用我们必须添加到表格中的 ID）
  2. 使用方法向其添加行insertRow()（其参数定义插入新数据的行；使用参数调用它-1会将新行添加到表的末尾）
  3. 用方法添加单元格insertCell(col)（参数代表列号，从0开始）
  4. 对于每个单元格，正确填充innerHTML
function addRowToTable(tableID, cabinetName, serial)
{
  // Find the table by ID
  console.log(tableID);
  var tab = document.getElementById(tableID);
  
  // Create an empty row in the LAST position of the table (-1 parameter)
  var row = tab.insertRow(-1);
  
  // Our row will have four columns:
  //  - the first and the last depending on cabinetName and serial parameters
  //  - the second and the third containing always the same "select" items
  var col0 = row.insertCell(0);
  var col1 = row.insertCell(1);
  var col2 = row.insertCell(2);
  var col3 = row.insertCell(3);
  
  col0.innerHTML = cabinetName;
  col1.innerHTML = '\
                <select>\
                  <option value=\"MGTITLE\">MGTITLE</option> \
                  <option value=\"ASM\">ASM</option> \
                  <option value=\"BBE\">BBE</option> \
                  <option value=\"BRC\">BRC</option> \
                  <option value=\"HPY\">HPY</option> \
                  <option value=\"RWC\">RWC</option> \
                  <option value=\"SOF\">SOF</option> \
                  <option value=\"SSP\">SSP</option> \
                  <option value=\"NOSHOW\">NOSHOW</option> \
                  <option value=\"OTHER\">OTHER</option> \
                </select>';
  col2.innerHTML = '\
                <select> \
                  <option value="SGTITLE">SGTITLE</option> \
                  <option value="XSS">XSS</option> \
                  <option value="XLR">XLR</option> \
                  <option value="NOSHOW">NOSHOW</option> \
                  <option value="OTHER">OTHER</option> \
                </select>';
  col3.innerHTML = serial;
}

如您所见，第一列和最后一列的内容取决于cabinetName和serial参数。相反，第二个和第三个单元格总是相同的。唯一的困难是它们是包含 HTML 的多行字符串（ES5多行字符串可以完成这项工作；详情请点击此处）。

在您的 HTML 中定义的表格将变得非常基本：只有标题，里面没有数据。重要提示：不要忘记添加 ID 属性：

<table id="dynTable" align="center">
    <tbody>
        <tr>
            <th>Cabinet</th>
            <th>MainGame Title</th>
            <th>SideGame Title</th>
            <th>Serial#</th>
        </tr>
    </tbody>
    <tbody>
        <tr></tr>
    </tbody>
</table>

最后，不要忘记通过addRowToTable()为您需要的每一行调用一次来动态添加您的行。更简单的方法：在<script>标签关闭之前添加一个<body>标签：

    <!--- ... --->
    <script>
        addRowToTable("dynTable", "LobbyHydra1", 22000);
        addRowToTable("dynTable", "LobbyHydra2", 12000);
        addRowToTable("dynTable", "LobbyOra1",   3100);
        addRowToTable("dynTable", "LobbyOra2",   3000);
        addRowToTable("dynTable", "LobbyPhx2",   1500);
        addRowToTable("dynTable", "LobbyLibra1", 7500);
        addRowToTable("dynTable", "LobbyLibra2", 6000);
    </script>
</body>

推荐阅读