Question

我正在努力创建一个包含div的表，但是单元格需要包含更复杂的结构。从某种意义上说，每个细胞单元代表一个小时，需要分成半小时和四分之一小时的细分。

<!-- a Cell example -->
<div class="cell hour">
   <div class="half-hour">
     <div class="quarter-hour"></div>
     <div class="quarter-hour"></div>
   </div>
   <div class="half-hour">
     <div class="quarter-hour"></div>
     <div class="quarter-hour"></div>
   </div>
</div>

似乎是表示我的结构的好方法。

我希望能够执行以下两项操作：使其等待标记，将调整悬停类。例如：

options = ['hour','hh','qh']

if (hour) apply onHover/onClick to hour blocks.
if (hh) apply onHover/onClick to halfhour blocks.
if (qh) apply onHover/onClick to qh blocks.

我希望能够做的另一件事是让块占用其父级的比例空间。例如：每个HH将占用50％的小时，2个QH将占用其父母的50％。 *我的half-hour和quarter-hour块似乎尚未定义形状。

我正在努力制作本周的小型调度程序，允许他们切换块然后在他们保存时，根据“选定”类进行解析

这是我一直在使用的小提琴：https://jsfiddle.net/dybsrzg3/

当我使用飞镖时，我知道在JQUERY中我可以做一些事情，例如将悬停和点击处理程序附加到dom并通过以下方式将其应用于选择：

$("document").on("hover","selection", function(){ ... });
$("document").on("click","selection", function(){ ... });

只要将selection添加到可选择的dom元素中。

Answer 1

由于需要一些高度才能看到空单元格，所以我添加了它们的高度以及相对定位和父级的50％宽度以及边框以查看四分之一小时的边缘

根据需要自定义。

.hour{
    background-color:grey;
    position:relative;
}
.half-hour{
    background-color: teal;
    display:inline-block;
    float: left;
    width:50%;
    height: 100%;
}
.quarter-hour{
    background-color:pink;
    border: 1px solid #ccc;
    display:inline-block;
    float: left;
    width:calc(50% - 2px);
    height: 100%;
}

.table{
    display: table-cell;
}
.row {
    display:table-row;
}
.cell, .row-header, .column-header {
    display:table-cell;
}
.cell {
    border: solid 1px black;
    height: 1px;
    width: 20px;
    text-align: center;
    cursor: pointer;
}
.column-header{
    text-align:center;
}
.cell:hover{
    background-color: cyan;
}

让孩子占据父母和比例宽度相同的高度

1 个答案: