2017-06-29 3 views
0

Ich möchte eine Tabelle mit Kontrollkästchen (jeweils zum Frühstück, Mittag-, Abendessen) machen. Über dem Tisch kann ich das Datum für meine Reise wählen, zum Beispiel vom 22.05.17 bis zum 25.05.17. und ich möchte eine Reihe mit Frühstück, Mittagessen, Abendessen für jeden Tag haben (5 in meinem Beispiel). Und wenn ich zum Beispiel auf Mittagessen klicke, kann ich etwas tun, wie zum Beispiel meine Reisekosten. Zum Beispiel 5 € für jedes angekreuzte Mittagessen. Ich weiß nicht, um eines dieser 2 Probleme zu lösen. GrüßeHTML dynamische Anzahl der Checkboxen

PS: Die Tabelle funktioniert, aber nicht die dynamische Anzahl der Zeilen mit den Kästen

enter image description here

+1

Bitte senden Sie ein Beispiel oder Code, damit wir – Jack

Antwort

0

Ja sicher: Erstens: Dies ist der Code für die Tabelle aus dem obigen Bild. und ich möchte dies dynamisch für die Anzahl der Tage machen, die sich aus dem zweiten Codebeispiel ergeben.

 <tbody> 
     <tr> 
      <th scope="row">TT.MM.JJJJ</th> 
      <td><span class="badge badge-pill badge-default">8 Stunden</span></td> 
      <td> 
      <label class="custom-control custom-checkbox m-0"> 
       <input type="checkbox" class="custom-control-input"> 
       <span class="custom-control-indicator"></span> 
      </label> 
      </td> 
      <td> 
      <label class="custom-control custom-checkbox m-0"> 
       <input type="checkbox" class="custom-control-input"> 
       <span class="custom-control-indicator"></span> 
      </label> 
      </td> 
      <td> 
      <label class="custom-control custom-checkbox m-0"> 
       <input type="checkbox" class="custom-control-input"> 
       <span class="custom-control-indicator"></span> 
      </label> 
      </td> 
     </tr> 
     <tr> 
      <th scope="row">TT.MM.JJJJ</th> 
      <td><span class="badge badge-pill badge-default">24 Stunden</span></td> 
      <td> 
      <label class="custom-control custom-checkbox m-0"> 
       <input type="checkbox" class="custom-control-input"> 
       <span class="custom-control-indicator"></span> 
      </label> 
      </td> 
      <td> 
      <label class="custom-control custom-checkbox m-0"> 
       <input type="checkbox" class="custom-control-input"> 
       <span class="custom-control-indicator"></span> 
      </label> 
      </td> 
      <td> 
      <label class="custom-control custom-checkbox m-0"> 
       <input type="checkbox" class="custom-control-input"> 
       <span class="custom-control-indicator"></span> 
      </label> 
      </td> 
     </tr> 
     <tr> 
      <th scope="row">TT.MM.JJJJ</th> 
      <td><span class="badge badge-pill badge-default">8 Stunden</span></td> 
      <td> 
      <label class="custom-control custom-checkbox m-0"> 
       <input type="checkbox" class="custom-control-input"> 
       <span class="custom-control-indicator"></span> 
      </label> 
      </td> 
      <td> 
      <label class="custom-control custom-checkbox m-0"> 
       <input type="checkbox" class="custom-control-input"> 
       <span class="custom-control-indicator"></span> 
      </label> 
      </td> 
      <td> 
      <label class="custom-control custom-checkbox m-0"> 
       <input type="checkbox" class="custom-control-input"> 
       <span class="custom-control-indicator"></span> 
      </label> 
      </td> 
     </tr>v 
     </tbody> 
    </table> 
    </div> 
    <div class="col-12"> 
    <hr> 
    </div> 

das nächste Code-Segment ist die Reise Daten für die Wahl (von wann bis wann), und ich möchte die Reise um die Anzahl der Tage benutzen sein wird, wie viele Zeilen für meine Kontrollkästchen erstellen (jedes wih Frühstück, Abendessen und Mittagessen)

<div class="row"> 
      <div class="col-6"> 
      <div class="form-group"> 
       <label>Reisebeginn (Datum, Uhrzeit)</label> 
       <input type="text" class="form-control" id="flatpickr1" placeholder="Start" name="start" /> 
      </div> 
      </div> 
      <div class="col-6"> 
      <div class="form-group"> 
       <label>Reiseende (Datum, Uhrzeit)</label> 
       <input type="text" class="form-control" id="flatpickr2" placeholder="Ende" name="start" /> 
      </div> 
      </div> 
+0

Platz es in Ihrer Frage helfen, sonst Leute vielleicht denken Sie bereits eine Antwort auf Ihre eigene Frage gefunden. – zer00ne

Verwandte Themen