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?

Question

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

Find a templating language or write code that appends elements. — epascarello, Sep 01 '21 at 20:34

Roberto Caboni · Accepted Answer · 2021-09-02T05:19:12.703

Let's abstract your problem.
Every row of your table, except the header, is made up of four columns:

A variable string in the column Cabinet
A list of options in the column MainGame Title (identical for every row!)
A list of options in the column SideGame Title (identical for every row!)
A variable string in the column Serial#

So, every row can be written by a function with the following interface:

function addRowToTable(tableID, cabinetName, serial);

I defined it in JavaScript, though the same could be done with PHP, because it is a language you already use in your page.
This function will have to:

Access the table in your HTML code (using an ID that we will have to add to the table)
Add rows to it using insertRow() method (its parameter defines the row in which insert the new data; calling it with parameter -1 will add the new row at the end of the table)
Add cells with insertCell(col) method (the parameter represents the column number, starting from 0)
For each cell, properly populate the 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;
}

As you can see, the first and the last column contents depend on cabinetName and serial parameters. The second and the third cells, instead, are always the same. The only difficulty is they are multiline strings containing HTML (the ES5 multiline string does the job; details here).

The table defined in your HTML will become really basic: only the header and no data inside. Important: don't forget to add the ID attribute:

<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>

Finally, don't forget to add your rows dynamically by calling addRowToTable() once for every row you need. The simplier way: add a <script> tag just before the closure of <body> tag:

    <!--- ... --->
    <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>

my bad, I just did it. thanks for your help – J One Sep 02 '21 at 15:24 — J One, Sep 02 '21 at 15:24

score 0 · Answer 2 · answered Sep 01 '21 at 20:49

0

You could use PHP variables to store the data you wish to repeat and then echo them as often as you like. Change the page extension to be ending in .php (so for example index.html would become index.php)

Set the variables like so..

<?php
$myvar1 = "Hello";
$myvar2 = "World";
?>

Then you can echo them at any point in your html like so..

<span><?php echo $myvar1; ?><span>
<button><?php echo $myvar2; ?></button>

answered Sep 01 '21 at 20:49

Glen Keybit

296
2
15

1

The OP asked for an html / js solution. The author as well as any other users landing on this question might not be using PHP – Aram Becker Sep 01 '21 at 20:53

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?

2 Answers2