复选框的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>