javascript - 如何用文本创建 td 边框

Question

我想创建一个带有默认边框的简单表格，然后在 td 元素(可能通过 jquery)上获取“悬停”事件，这将导致:

a) 顶部边框应该是黑色的，中间有空白

b) 在边框中间应该显示 td 中 p 元素的文本(文本应该位于悬停元素和上一个元素之间)

结果应该是这样的(我用不同的颜色标记悬停的元素):

我不确定，但仅通过使用 css 可能无法做到这一点，我试图实现简单的示例，但它不起作用。想法是创建两个 div(模仿顶部边框)和 p 元素。问题是因为 div 总是不可见的(应该在元素悬停时替换正常的 td 边框)，我也不知道如何根据需要定位 p 元素。

我怎样才能得到正确的解决方案？

$(document).ready(function() {
  var tableBodyContent = "";
  for (var i = 0; i < 10; i++) {
    tableBodyContent += '<tr>' +
      '<td><div class="myTopBorder"><div class="myBorder leftBorder"></div><div class="myBorder rightBorder"></div></div><p class="myText" value="' + i + ':00">ok</p>Item ' + i + '</td>' +
      '<td><div class="myTopBorder"><div class="myBorder leftBorder"></div><div class="myBorder rightBorder"></div></div><p class="myText" value="' + i + ':00">ok</p>Item ' + i + '</td>' +
      '<td><div class="myTopBorder"><div class="myBorder leftBorder"></div><div class="myBorder rightBorder"></div></div><p class="myText" value="' + i + ':00">ok</p>Item ' + i + '</td>' +
      '<td><div class="myTopBorder"><div class="myBorder leftBorder"></div><div class="myBorder rightBorder"></div></div><p class="myText" value="' + i + ':00">ok</p>Item ' + i + '</td>' +
      '<td><div class="myTopBorder"><div class="myBorder leftBorder"></div><div class="myBorder rightBorder"></div></div><p class="myText" value="' + i + ':00">ok</p>Item ' + i + '</td>' +
      '</tr>'
  }
  $("#timeTableBody").append(tableBodyContent);
});

$("td").hover(
  function() {
    $(this).find(".myBorder").each(function(index) {
      $(this).show();
    });
  },
  function() {
    $(this).find(".myBorder").each(function(index) {
      $(this).hide();
    });
  }
);

table {
  border: none;
  border-collapse: collapse;
  padding: 0;
  margin: 0;
}

th,
td {
  width: 45px;
  height: 20px;
  padding: 10px;
}

.myTopBorder {
  height: 1px;
  width: 100%;
}

.leftBorder,
.rightBorder {
  height: 100%;
  width: 30%;
  display: none;
}

.leftBorder {
  float: left;
}

.rightBorder {
  float: right;
}

th {
  border: 1px solid black;
}

td {
  border-top: 1px solid lightgrey;
  border-left: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
}

td:hover {
  border: none;
}

.myText {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
    </tr>
  </thead>
  <tbody id="timeTableBody">
  </tbody>
</table>

Answer 1

您需要的可以单独使用 CSS 完成。通过将悬停时显示的值放在 td 的 data 属性中，您可以使用 attr() 轻松地将其读入伪元素的内容。然后您可以使用类似的技术在悬停时创建边框的左侧和右侧，如下所示:

$(document).ready(function() {
  var tableBodyContent = '';
  for (var i = 0; i < 10; i++) {
    var rowArr = (new Array(5)).fill('<td data-hover="' + i + ':00"><i></i><p class="item">Item ' + i + '</p></td>', 0, 5);
    tableBodyContent += '<tr>' + rowArr.join('') + '</tr>'
  }
  $("#timeTableBody").append(tableBodyContent);
});

table {
  border-collapse: collapse;
  padding: 0;
  margin: 0;
  background-color: #EFEFEF;
}

th,
td {
  width: 45px;
  height: 20px;
  padding: 10px;
}

th {
  border: 1px solid black;
  border-bottom: 0;
}

td {
  border: 1px solid lightgrey;
  border-bottom: 0;
  position: relative;
}

td i:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 1px;
  background-color: #000;
  display: none;
}
td i:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 1px;
  background-color: #000;
  display: none;
}

td:before {
  content: attr(data-hover);
  position: absolute;
  top: -7px;
  left: 18px;
  width: 30px;
  font-size: 0.8em;
  text-align: center;
  display: none;
} 
td:hover {
  border-top-color: transparent !important;
  background-color: #DEDEDE;
}
td:hover p {
  display: none;
}
td:hover:before,
td:hover i:before,
td:hover i:after {
  display: block;
}

tbody tr:nth-child(1) td {
  border-top-color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
    </tr>
  </thead>
  <tbody id="timeTableBody"></tbody>
</table>