如何用文字创建td边框

时间：2019-01-30 20:05:58

标签： javascript jquery html css

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

a）顶部边框应为黑色，中间留空白

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

结果应如下所示（我将悬停的元素标记为不同的颜色）

enter image description here

我不确定，但是仅使用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>

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

您所需要的可以仅使用CSS来完成。通过将要显示的值放在data的{​​{1}}属性中，您可以使用td轻松地将其读出到伪元素的内容中。然后，您可以使用类似的技术在悬停时创建边框的左侧和右侧，如下所示：

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;
}

答案 2 :(得分：1)

您可以像这样使用content: attr(data-value)：

solution

完整的CSS和最短的解决方案：

$(document).ready(function() {
  for (let i = 0, $tr; i < 10; i++) {
    $tr = $("<tr></tr>")
      .appendTo("#timeTableBody");
    for (var day = 0; day < 5; day++)
      $("<td></td>")
      .attr("data-value", i + ":00")
      .text("Item " + i)
      .appendTo($tr);
  }
});
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: 1px solid lightgrey;
  position: relative;
}

td:hover::after {
  content: attr(data-value);
  position: absolute;
  bottom: -8px;
  line-height: 12px;
  font-size: 12px;
  background: white;
  padding: 2px;
}
<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>

相关问题
最新问题