时间戳

首页 > 解决方案 > 如何按时间在 HTML 表格中放置事件

javascript - 如何按时间在 HTML 表格中放置事件

问题描述

我试图在我的 HTML 表格中放置事件，但是，我只能每隔 15 分钟执行一次，因为每个单元格每 15 分钟标记一次。我更改了背景颜色以在事件发生时显示。我使用从数据库接收的开始时间和结束时间。

当我想放置一个 8:30 到 12:30 的事件时，它可以选择具有 8:30 和 12:30 的单元格并填充中间。但是，我无法在 8:30 到 8:45 之间放任何东西，因为没有什么可以选择的。例如，我想在 8:35 到 12:25 之间放置一个事件，但是在 HTML id 选择器中没有放置它的地方。

如何允许 HTML 表格接受大于 15 分钟的间隔？有没有更好的方法将事件放置在 HTML 表格上，而不仅仅是更改单元格的背景颜色？

这是它目前的样子 当前时间表

这是它应该看起来的样子 在此处输入图像描述

<tr id="4_RowTable">
<td id="r4days">Friday</td>
<td id="t_800_d_Friday"></td>
<td id="t_815_d_Friday"></td>
<td id="t_830_d_Friday" bgcolor="#0000FF"></td>
<td id="t_845_d_Friday" bgcolor="#0000FF"></td>
<td id="t_900_d_Friday" bgcolor="#0000FF"></td>
<td id="t_915_d_Friday" bgcolor="#0000FF"></td>
<td id="t_930_d_Friday" bgcolor="#0000FF"></td>
<td id="t_945_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1000_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1015_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1030_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1045_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1100_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1115_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1130_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1145_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1200_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1215_d_Friday" bgcolor="#0000FF"></td>
<td id="t_1230_d_Friday"></td>
<td id="t_1245_d_Friday"></td>
<td id="t_1300_d_Friday"></td>
<td id="t_1315_d_Friday"></td>
<td id="t_1330_d_Friday"></td>
<td id="t_1345_d_Friday"></td>
<td id="t_1400_d_Friday"></td>
<td id="t_1415_d_Friday"></td>
<td id="t_1430_d_Friday"></td>
<td id="t_1445_d_Friday"></td>
<td id="t_1500_d_Friday"></td>
<td id="t_1515_d_Friday"></td>
<td id="t_1530_d_Friday"></td>
<td id="t_1545_d_Friday"></td>
<td id="t_1600_d_Friday"></td>
<td id="t_1615_d_Friday"></td>
<td id="t_1630_d_Friday"></td>
<td id="t_1645_d_Friday"></td>
<td id="t_1700_d_Friday"></td>
<td id="t_1715_d_Friday"></td>
<td id="t_1730_d_Friday"></td>
<td id="t_1745_d_Friday"></td>
<td id="t_1800_d_Friday"></td>
<td id="t_1815_d_Friday"></td>
<td id="t_1830_d_Friday"></td>
<td id="t_1845_d_Friday"></td>

标签： javascripthtmlscheduletimetable

解决方案

您可以使用 CSS 属性linear-gradient()在单元格内的不同位置开始/结束蓝色。使用您的示例，如果一个单元格为 15 分钟，并且我们希望将时间显示为 5 分钟间隔，请将linear-gradient百分比大致设置为33%, 66% and 100% 

<style>
  td {
    border: 1px solid #000;
  }
</style>
<table>
  <tr>
    <td style="background:blue">
      this cell means 8:30 to 8:45</td>
  </tr>
  <tr>
    <td style="background: linear-gradient(to right, 
               white 33%, blue 33% 66%, blue 66% 100%);">
      this cell means 8:35 to 8:45</td>
  </tr>
  <tr>
    <td style="background: linear-gradient(to right,
               white 33%, white 33% 66%, blue 66% 100%);">
      this cell means 8:40 to 8:45</td>
  </tr>
</table>

推荐阅读