Wie HTML mit JavaScript zu duplizieren?

Question

Ein Teil meiner Webseite dupliziert denselben Code 24 Mal mit leicht unterschiedlichen Variablen. Es sieht wie folgt aus:

<div id="timeTable" class="container timeTable expand "> 

    <div class="row tableData"> 
      <div style="width: 13%; " class="col-xs-1 <?php checkColor(1); ?>">01 AM</div> 
      <div style="width: 37%;" class="col-xs-5 center <?php checkColor(1); ?>"> 
       <p id="hour1" class="hName"></p> 
       <input id="1" class="short hidden hInput" type="text"> 
      </div> 

      <div style="width: 13%;" class="col-xs-1 <?php checkColor(13); ?>">01 PM</div> 
      <div style="width: 37%;" class="col-xs-5 center <?php checkColor(13); ?>"> 
       <p id="hour13" class="hName"></p> 
       <input id="13" class="short hidden hInput" type="text"> 
      </div> 
      </div> 

      <div class="row tableData"> 
       <div style="width: 13%;" class="col-xs-1 <?php checkColor(2); ?>">02 AM</div> 
       <div style="width: 37%;" class="col-xs-5 center <?php checkColor(2); ?>"> 
        <p id="hour2" class="hName"></p> 
        <input id="2" class="short hidden hInput" type="text"> 
       </div> 

       <div style="width: 13%;" class="col-xs-1 <?php checkColor(14); ?>">02 PM</div> 
       <div style="width: 37%;" class="col-xs-5 center <?php checkColor(14); ?>"> 
        <p id="hour14" class="hName"></p> 
        <input id="14" class="short hidden hInput" type="text"> 
       </div> 
      </div> 

      <div class="row tableData"> 
       <div style="width: 13%;" class="col-xs-1 <?php checkColor(3); ?>">03 AM</div> 
       <div style="width: 37%;" class="col-xs-5 center <?php checkColor(3); ?>"> 
        <p id="hour3" class="hName"></p> 
        <input id="3" class="short hidden hInput" type="text"> 
       </div> 

       <div style="width: 13%;" class="col-xs-1 <?php checkColor(15); ?>">03 PM</div> 
       <div style="width: 37%;" class="col-xs-5 center <?php checkColor(15); ?>"> 
        <p id="hour15" class="hName"> </p> 
        <input id="15" class="short hidden hInput" type="text"> 
       </div> 
      </div> 

Alles, was ich wirklich brauchen, ist ein Javascript ist while-Schleife und dann etwas, das den Code in meinem Dokument schreiben kann ... so etwas wie:

A = 1, B = 13. While A => 12, B => 24, A++, B++. 
<div class="row tableData"> 
     <div style="width: 13%; " class="col-xs-1 <?php checkColor(1); ?>">01 AM</div> 
     <div style="width: 37%;" class="col-xs-5 center <?php checkColor(1); ?>"> 
      <p id="hourA" class="hName"></p> 
      <input id="A" class="short hidden hInput" type="text"> 
     </div> 

     <div style="width: 13%;" class="col-xs-1 <?php checkColor(13); ?>">01 PM</div> 
     <div style="width: 37%;" class="col-xs-5 center <?php checkColor(13); ?>"> 
      <p id="hourB" class="hName"></p> 
      <input id="B" class="short hidden hInput" type="text"> 
     </div> 
     </div> 

Kann jemand bitte zeigen mir Codebeispiele? Vielen Dank!

Answer 1

, was Sie beschreiben, ist eine Schablone, Kasse ractivejs http://www.ractivejs.org/

nur eine einfache aussehen lassen, die ein Array von Variablen mit der gleichen Vorlage gehen wird

Answer 2

Hier wie Ractive wahrscheinlich seine Arbeit tut:

var placeholder = /\{\{(\w+)\}\}/g; 
 
var productEl = document.getElementById("product"); 
 
var productTpl = compile(productEl.text); 
 

 
productEl.parentNode.innerHTML = [ 
 
    { name: "Rubber Duck", price: "cheap", color: color }, 
 
    { name: "Gold Duck", price: "expensive", color: color } 
 
].map(productTpl).join(""); 
 

 
function color() { 
 
    switch (this.price) { 
 
    case "cheap": return "orange"; 
 
    case "expensive": return "red"; 
 
    default: return "black"; 
 
    } 
 
} 
 

 
function compile (tpl) { 
 
    tpl = tpl.replace(/\n/g, ""); 
 
    tpl = tpl.replace(/"/g, "\\\""); 
 
    tpl = "return \"" + tpl + "\";"; 
 
    return new Function("data", tpl.replace(placeholder, "\"+(" 
 
    + "typeof data.$1 == \"function\" ? data.$1() : data.$1" 
 
    + ")+\"")); 
 
}

body{text-align:left}table{border-collapse:collapse}td,th{border:1px solid black;padding:.25em}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>name</th> 
 
     <th>price</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="products"> 
 
    <script id="product" type="text/plain"> 
 
     <tr> 
 
     <td>{{name}}</td> 
 
     <td style="color:{{color}}">{{price}}</td> 
 
     </tr> 
 
    </script> 
 
    </tbody> 
 
</table>

"compile" nimmt eine Zeichenfolge und gibt eine Funktion zurück:

var tpl = compile("<b>{{text}}</b>"); 
// tpl = function (data) { 
// return "<b>" + (typeof data.text == "function" ? data.text() : data.text) + "</b>"; 
// } 
tpl({ text: "ping" }); // "<b>ping</b>" 
tpl({ text: "pong" }); // "<b>pong</b>"