Question

我想制作一张带有复选框的桌子（每张都是早餐，午餐，晚餐）。在桌子上方，我可以选择旅程的日期，例如从22.05.17到25.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>

HTML动态复选框数量

1 个答案: