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

Question

我想创建一个带有默认边框的简单表，然后在td元素上获取“悬停”事件（可能由 jquery），这将导致：

a) 顶部边框应为黑色，中间有空白区域

b）在边框的中间应该显示来自那个p元素的文本td（文本应该定位在悬停和前一个元素之间）

结果应该看起来像（我用不同的颜色标记悬停的元素）：

我不确定，但可能仅通过使用 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>

标签： javascriptjqueryhtmlcss

Answer 1

您可以对内容使用伪元素和数据属性，如下所示：

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

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

th {
  border: 1px solid black;
}

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

td::before {
  content: attr(data-text);
  position: absolute;
  z-index: 2;
  top: -5px;
  font-size: 10px;
  left: 0;
  right: 0;
  text-align: center;
  background: linear-gradient(green, green) center left/20px 1px, linear-gradient(green, green) center right/20px 1px;
  background-repeat: no-repeat;
  opacity: 0;
}

td:hover {
  border-top: 0;
  background: orange;
}

td:hover::before {
  opacity: 1;
}

<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">
    <tr>
      <td data-text="3:00">Item 0</td>
      <td data-text="3:00">Item 0</td>
      <td data-text="3:00">Item 0</td>
      <td data-text="3:00">Item 0</td>
      <td data-text="3:00">Item 0</td>
    </tr>
    <tr>
      <td data-text="3:00">Item 0</td>
      <td data-text="3:00">Item 0</td>
      <td data-text="3:00">Item 0</td>
      <td data-text="3:00">Item 0</td>
      <td data-text="3:00">Item 0</td>
    </tr>
    <tr>
      <td data-text="3:00">Item 0</td>
      <td data-text="3:00">Item 0</td>
      <td data-text="3:00">Item 0</td>
      <td data-text="3:00">Item 0</td>
      <td data-text="3:00">Item 0</td>
    </tr>
  </tbody>
</table>