javascript - 预订时隙时创建列跨度

标签 javascript jquery html css html-table

我玩了几个小时，但没有找到好的解决方案，所以我来到这里。

现在我正在尝试在行和员工上显示具有不同时间段 (08:00-08:30|08:30-09:00|09:00-10:30.. a.s.o) 的表格在列标题上。

开始吧:

$(document).on('click', '.free-date', function(e) {
  $(".btn-success").removeClass("selected");
  $(this).parent().addClass("selected");

});
.btn-success {
  cursor: pointer;
}

.btn-success.selected {
  background-color: steelblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="flex-fill w-100 table-bordered">
  <!--    -->
  <tbody>
    <tr>
      <th style="width: 25%">Time</th>
      <th class="text-center" style="width: 25%">Employee 1</th>
      <th class="text-center" style="width: 25%">Employee 2</th>
      <th class="text-center" style="width: 25%">Employee 3</th>
    </tr>

    <tr>
      <td>
        09:00

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 09:00:00" data-enddate="2019-11-16 10:00:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 09:00:00" data-enddate="2019-11-16 10:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 09:00:00" data-enddate="2019-11-16 10:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        09:30

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 09:30:00" data-enddate="2019-11-16 10:30:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 09:30:00" data-enddate="2019-11-16 10:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 09:30:00" data-enddate="2019-11-16 10:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        10:00

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 10:00:00" data-enddate="2019-11-16 11:00:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 10:00:00" data-enddate="2019-11-16 11:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 10:00:00" data-enddate="2019-11-16 11:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        10:30

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 10:30:00" data-enddate="2019-11-16 11:30:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 10:30:00" data-enddate="2019-11-16 11:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 10:30:00" data-enddate="2019-11-16 11:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        11:00

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 11:00:00" data-enddate="2019-11-16 12:00:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 11:00:00" data-enddate="2019-11-16 12:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 11:00:00" data-enddate="2019-11-16 12:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        11:30

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 11:30:00" data-enddate="2019-11-16 12:30:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 11:30:00" data-enddate="2019-11-16 12:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 11:30:00" data-enddate="2019-11-16 12:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        12:00

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 12:00:00" data-enddate="2019-11-16 13:00:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 12:00:00" data-enddate="2019-11-16 13:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 12:00:00" data-enddate="2019-11-16 13:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        12:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 12:30:00" data-enddate="2019-11-16 13:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 12:30:00" data-enddate="2019-11-16 13:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 12:30:00" data-enddate="2019-11-16 13:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        13:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 13:00:00" data-enddate="2019-11-16 14:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 13:00:00" data-enddate="2019-11-16 14:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 13:00:00" data-enddate="2019-11-16 14:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        13:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 13:30:00" data-enddate="2019-11-16 14:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 13:30:00" data-enddate="2019-11-16 14:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 13:30:00" data-enddate="2019-11-16 14:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        14:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 14:00:00" data-enddate="2019-11-16 15:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 14:00:00" data-enddate="2019-11-16 15:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 14:00:00" data-enddate="2019-11-16 15:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        14:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 14:30:00" data-enddate="2019-11-16 15:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 14:30:00" data-enddate="2019-11-16 15:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 14:30:00" data-enddate="2019-11-16 15:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        15:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 15:00:00" data-enddate="2019-11-16 16:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 15:00:00" data-enddate="2019-11-16 16:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 15:00:00" data-enddate="2019-11-16 16:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        15:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 15:30:00" data-enddate="2019-11-16 16:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 15:30:00" data-enddate="2019-11-16 16:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 15:30:00" data-enddate="2019-11-16 16:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        16:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 16:00:00" data-enddate="2019-11-16 17:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 16:00:00" data-enddate="2019-11-16 17:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 16:00:00" data-enddate="2019-11-16 17:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        16:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 16:30:00" data-enddate="2019-11-16 17:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 16:30:00" data-enddate="2019-11-16 17:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 16:30:00" data-enddate="2019-11-16 17:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        17:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 17:00:00" data-enddate="2019-11-16 18:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 17:00:00" data-enddate="2019-11-16 18:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 17:00:00" data-enddate="2019-11-16 18:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        17:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 17:30:00" data-enddate="2019-11-16 18:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 17:30:00" data-enddate="2019-11-16 18:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 17:30:00" data-enddate="2019-11-16 18:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
  </tbody>
</table>

代码是用 PHP 动态生成的(我在 Laravel 中使用了 Controller )。

显示表格时，我还传递了一个时间段，可以是 0:15h 0:30h 1:00h 等。 我想实现通过 css 显示预订的(需要的)插槽。 这意味着当某人有一个时间段为 01:00h 并且他单击 09 点时，09:00 和 09:30 的列应该(例如)更改背景属性。 这样用户就可以在日历表上看到他预定的时间跨度。 这应该是动态的，这意味着当用户点击 09 点时，它应该将背景设置为 09:00 和 09:30。当他点击 10 点时，它应该设置 10:00 和 10:30 的背景 -> 09:00 和 09:30 的旧选择应该不再可见。

我试过以下:

- colspan: 没有成功，因为细胞一直在移动。隐藏移动的单元格和跨越单击的单元格可能是太多的逻辑。

- 使用 position=absolute 的 div 并通过 JQuery 设置高度: 问题是 position=absolute 的 div 一直都在空间之外。认为这是一个很好的解决方案，但需要更多知识才能完成，也许有人可以帮助我解决这个问题。

完全.. 我查看了旧的完整日历.. 看看它是如何完成的。 似乎 fullcalendar 也利用 position:absolute 来计算高度/宽度。

也许有人为我提供了一个好的/干净的解决方案或提示？

提前谢谢你。

干杯格雷格

最佳答案

您可以搜索索引位置，以将相同的规则应用于同一索引处的子项的下一行。

例子

$(document).on("click", ".free-date", function(e) {
  var index = $(this).parent().index();
  $(".btn-success").removeClass("selected");
  $(this)
    .parent()
    .parent() //climb up to the parent row
    .next() // go to next row
    .children().eq(index) // every child with the same index
    .addClass("selected").html('booked');
  $(this).parent().addClass("selected").html('booked');
});
.btn-success {
  cursor: pointer;
}

.btn-success.selected {
  background-color: steelblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="flex-fill w-100 table-bordered">
  <!--    -->
  <tbody>
    <tr>
      <th style="width: 25%">Time</th>
      <th class="text-center" style="width: 25%">Employee 1</th>
      <th class="text-center" style="width: 25%">Employee 2</th>
      <th class="text-center" style="width: 25%">Employee 3</th>
    </tr>

    <tr>
      <td>
        09:00

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 09:00:00" data-enddate="2019-11-16 10:00:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 09:00:00" data-enddate="2019-11-16 10:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 09:00:00" data-enddate="2019-11-16 10:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        09:30

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 09:30:00" data-enddate="2019-11-16 10:30:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 09:30:00" data-enddate="2019-11-16 10:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 09:30:00" data-enddate="2019-11-16 10:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        10:00

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 10:00:00" data-enddate="2019-11-16 11:00:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 10:00:00" data-enddate="2019-11-16 11:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 10:00:00" data-enddate="2019-11-16 11:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        10:30

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 10:30:00" data-enddate="2019-11-16 11:30:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 10:30:00" data-enddate="2019-11-16 11:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 10:30:00" data-enddate="2019-11-16 11:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        11:00

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 11:00:00" data-enddate="2019-11-16 12:00:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 11:00:00" data-enddate="2019-11-16 12:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 11:00:00" data-enddate="2019-11-16 12:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        11:30

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 11:30:00" data-enddate="2019-11-16 12:30:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 11:30:00" data-enddate="2019-11-16 12:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 11:30:00" data-enddate="2019-11-16 12:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        12:00

      </td>
      <td class="btn-info btn-reserved" data-employeeid="1" data-startdate="2019-11-16 12:00:00" data-enddate="2019-11-16 13:00:00">
        <div class="booked-date text-center">booked</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 12:00:00" data-enddate="2019-11-16 13:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 12:00:00" data-enddate="2019-11-16 13:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        12:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 12:30:00" data-enddate="2019-11-16 13:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 12:30:00" data-enddate="2019-11-16 13:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 12:30:00" data-enddate="2019-11-16 13:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        13:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 13:00:00" data-enddate="2019-11-16 14:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 13:00:00" data-enddate="2019-11-16 14:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 13:00:00" data-enddate="2019-11-16 14:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        13:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 13:30:00" data-enddate="2019-11-16 14:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 13:30:00" data-enddate="2019-11-16 14:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 13:30:00" data-enddate="2019-11-16 14:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        14:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 14:00:00" data-enddate="2019-11-16 15:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 14:00:00" data-enddate="2019-11-16 15:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 14:00:00" data-enddate="2019-11-16 15:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        14:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 14:30:00" data-enddate="2019-11-16 15:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 14:30:00" data-enddate="2019-11-16 15:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 14:30:00" data-enddate="2019-11-16 15:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        15:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 15:00:00" data-enddate="2019-11-16 16:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 15:00:00" data-enddate="2019-11-16 16:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 15:00:00" data-enddate="2019-11-16 16:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        15:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 15:30:00" data-enddate="2019-11-16 16:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 15:30:00" data-enddate="2019-11-16 16:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 15:30:00" data-enddate="2019-11-16 16:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        16:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 16:00:00" data-enddate="2019-11-16 17:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 16:00:00" data-enddate="2019-11-16 17:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 16:00:00" data-enddate="2019-11-16 17:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        16:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 16:30:00" data-enddate="2019-11-16 17:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 16:30:00" data-enddate="2019-11-16 17:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 16:30:00" data-enddate="2019-11-16 17:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        17:00

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 17:00:00" data-enddate="2019-11-16 18:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 17:00:00" data-enddate="2019-11-16 18:00:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 17:00:00" data-enddate="2019-11-16 18:00:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
    <tr>
      <td>
        17:30

      </td>
      <td class="btn-success" data-employeeid="1" data-startdate="2019-11-16 17:30:00" data-enddate="2019-11-16 18:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="2" data-startdate="2019-11-16 17:30:00" data-enddate="2019-11-16 18:30:00">
        <div class="free-date text-center">free</div>
      </td>
      <td class="btn-success" data-employeeid="3" data-startdate="2019-11-16 17:30:00" data-enddate="2019-11-16 18:30:00">
        <div class="free-date text-center">free</div>
      </td>

    </tr>
  </tbody>
</table>

codepen to play with

关于javascript - 预订时隙时创建列跨度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58890302/

上一篇：html - 如何让选中的图标进入我的进度条

下一篇：html - 响应式菜单在显示时将固定栏向下推

相关文章：

javascript - 富文本内容破坏 TinyMCE

javascript - 从字典数组中获取按日期排序的最近两个项目

javascript - 如何使用 jQuery .attr() 更改 id 字体大小？

html - 从 bootstrap 隐藏 css 属性

javascript - 根据屏幕尺寸将列移动到新行html表

javascript - 解析 javascript 函数中的外部范围引用以进行序列化

jquery - 如果 td 的值为 1，则突出显示 td

javascript - datepickertime jquery/bootstrap 显示不正确

javascript - 如何在 QWebEngineView 中将值从 QML 传递给 JavaScript

html - 视频填充剩余空间，同时与 CSS 保持比例

©2024 IT工具网  联系我们