javascript - 预订时间段时创建列跨度
问题描述
我玩了几个小时，但没有找到好的解决方案，所以这就是我来到这里的原因。
现在，我正在尝试在列上的行和员工上显示具有不同时间段 (08:00-08:30|08:30-09:00|09:00-10:30.. aso) 的表格标题。
开始了：
$(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 中使用了一个控制器）。
显示表格时，我还传递了一个时间段，可以是 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 一直在空间之外。认为这是一个很好的解决方案，但需要更多的知识来完成它，也许有人可以帮助我解决这个问题。
完全没有.. 我查看了旧的完整日历.. 看看它是如何完成的。似乎全日历也利用位置：绝对计算高度/宽度。
也许有人给了我一个好的/干净的解决方案或一个提示？
先感谢您。
干杯格雷格
解决方案
您可以搜索索引位置以将相同的规则应用于下一行到同一索引处的子项。
例子
$(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>推荐阅读
- javascript - Mapbox GL JS地图中基于缩放级别的圆半径
- javascript - datepicker 指定的值不符合 jquery.js 要求的格式
- apache-kafka - Kafka：如何解决损坏偏移的问题，以及如何手动重置消费者的偏移以再次读取？
- c# - 带有控制器方法的 Dotnet 核心方法注入
- c++ - 0xC0000005：访问冲突读取位置 0xCDCDCDC1
- java - PHP exec（）jar java文件不返回任何输出
- r - R plto_ly 或 ggplot：随着不透明度的变化而淡入淡出
- scala - 是否可以在多个 build.sbt 文件中覆盖和使用相同的值？
- hadoop - 使用 Apache Ignite Hadoop 加速器提交 Hadoop 作业
- c# - 搜索用户是否在 Office 365 上拥有帐户？