홈>2020-03-18 17:10

javascript - 텍스트로 td 테두리를 만드는 방법

기본 테두리가있는 간단한 테이블을 만들고 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

답변 # 1

필요한 것은 CSS 만 사용하여 수행 할 수 있습니다. data 에서 호버에 표시 할 값을 배치하여 td 의 속성 attr() 를 사용하여 psuedo 요소의 내용을 쉽게 읽을 수 있습니다. . 그런 다음 비슷한 기술을 사용하여 다음과 같이 호버에서 테두리의 왼쪽과 오른쪽을 만들 수 있습니다.

$(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>

답변 # 2

content: attr(data-value) 를 사용할 수 있습니다 이렇게 :

전체 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>

답변 # 3

다음과 같이 컨텐츠에 의사 요소 및 데이터 속성을 사용할 수 있습니다.

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>

Python2.net

javascript - 텍스트로 td 테두리를 만드는 방법

관련 자료