在所有 div 上方添加 div，高度在两个 div 匹配数据元素之间答案

【问题标题】：Add div above all divs with height between two divs matching data elements在所有 div 上方添加 div，高度在两个 div 匹配数据元素之间
【发布时间】：2022-09-28 02:54:36
【问题描述】：

我有表格和 td，上面有数字作为 div 我想在所有 div 上方添加一个 div，高度在匹配的日期数字之间，例如 div 应该从 700 开始，到 800 结束在它下面的 div 之上。我使用下面的代码，但它在它们之间添加。

  var htmlString = \'<div class=\"stack-top \' + cssclass + \"><div class=\"mydivinside\"><span class=\"stitle\">\' + title + \'</span><br/><span>\' + setime + \'</span></div></div>\',
  div = document.createElement(\'div\'),
  div1 = document.querySelector(\"div[data-day=\" + dateoffset + \"\'][date-tnumber=\" + ehour + \"\']\");
  div.innerHTML = htmlString;
  div1.parentNode.insertBefore(div.firstChild, div1.nextSibling);


 <td class=\"md\" data-date=\"10/24/2022\" data-day=\"0\">
  <div data-day=\"0\" date-tnumber=\"700\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"701\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"702\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"703\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"704\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"705\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"706\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"707\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"708\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"709\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"710\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"711\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"712\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"713\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"714\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"715\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"716\" onclick=\"GetData(this);\"></div>
  <div data-day=\"0\" date-tnumber=\"717\" onclick=\"GetData(this);\"></div>
</td>


CSS
    .stack-top{ z-index: 9999;  vertical-align:middle;  width: 80%; position: relative;}

从编程的角度来看，在需要之前不要创建对象。没有理由为每 1 小时行创建 60 个“分钟”对象，然后尝试导航约会应该出现的位置。对于每个小时，您应该检索指定，按时间排序，然后按顺序创建和插入它们。
我这样做了，但它没有显示约会之间的真正差距。
从视觉上看，这可以通过将约会对象绝对定位在某个计算的top 上来表示，该位置基于 1 小时行块内相对定位的容器 div 的高度。为了简单的计算，假设行的高度设置为height:120px。根据您上面的图片，早上 7 点的约会位于top:0px，并且约会对象的高度应计算为设置为每分钟 2 像素。

标签： html jquery css

【解决方案1】：

在视觉上，这可以通过将约会对象绝对定位在某个计算的顶部来表示，该顶部基于 1 小时行块内相对定位的容器 div 的高度。

为了简单的计算，假设一行的高度设置为 height:120px。根据您上面的图片，早上 7 点的约会位于顶部：0 像素，并且约会对象的高度应计算为每分钟 2 像素

$(function() {
  $(".appointment-container").each(function(i, container) {
    let factor = Math.round($(container).height() / 60);
    
    $(this).children(".appointment").each(function(i, appointment) {
      let top = (appointment.dataset.start - container.dataset.start) * factor;
      let height = appointment.dataset.duration * factor;

      $(appointment)
        .css("top", `${top}px`)
        .css("height", `${height}px`);
    });;

  });
});

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid gray;
}

table td {
  margin: 0;
  padding: 0;
}

table>thead td:first-child {
  width: auto;
}

table>thead td,
table>tbody td:first-child {
  text-align: center;
  background-color: #ccc;
  vertical-align: top;
  border-bottom: 1px solid black;
}

.appointment-container {
  position: relative;
  height: 60px;
  border: 1px solid gray;
  padding: 0;
  box-sizing: border-box;
}

.appointment {
  box-sizing: border-box;
  position: absolute;
  background-color: pink;
  border: 1px solid red;
  width: 100%;
  font-size: 10pt;
  overflow:hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Appointment<br>Schedule</td>
      <td>Tuesday<br>27-Sep-2022</td>
      <td>Wednesday<br>28-Sep-2022</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>7:00 AM</td>
      <td>
        <div class="appointment-container" data-start="700">
          <div class="appointment" data-start="710" data-duration="10">Job 1</div>
          <div class="appointment" data-start="730" data-duration="20">Job 2</div>
        </div>
      </td>
      <td>
        <div class="appointment-container"></div>
      </td>
    </tr>
    <tr>
      <td>8:00 AM</td>
      <td>
        <div class="appointment-container" data-start="800">
          <div class="appointment" data-start="830" data-duration="60">Job 3</div>
        </div>
      </td>
      <td>
        <div class="appointment-container"></div>
      </td>
    </tr>
    <tr>
      <td>9:00 AM</td>
      <td>
        <div class="appointment-container"></div>
      </td>
      <td>
        <div class="appointment-container"></div>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：