複選框的HTML動態編號

Question

我想用複選框製作一張桌子（每個早餐，午餐，晚餐）。在桌子上方，我可以選擇我的旅程日期，例如從22.05.17到17.05.17。我想每天有一排早餐，午餐和晚餐（在我的例子中是5）。例如，當我點擊午餐時，我可以做點什麼，比如我的旅行費用。例如每個點擊午餐複選框5歐元。我不知道解決這兩個問題中的任何一個。 問候

PS：表是工作，但不是動態的行數與盒

enter image description here

Answer 1

呀肯定的：第一：這是從上面的圖片表格的代碼。 ，我想使這個動態的第二個代碼示例產生的天數。

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

下一個代碼段是選擇的往返日期（從什麼時候時），我想利用天旅途會，人數創造我的複選框許多行（每個王氏早餐，晚餐和午餐）

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