홈>
기본 테두리가있는 간단한 테이블을 만들고
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>
- 답변 # 1
- 답변 # 2
content: attr(data-value)
를 사용할 수 있습니다 이렇게 :$(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>
관련 자료
- javascript - 화면에 경고가있는 텍스트를 복사하는 방법
- CSS만으로 CD 뒷면을 만드는 방법은 무엇입니까?
- CSS로 곡선 테두리를 만드는 방법은 무엇입니까?
- ruby - 3 개 이상의 배열에서 각 항목으로 해시를 만드는 방법
- 정수 키로 TIMEDICT를 만드는 방법은 무엇입니까?
- R - 아르 자형 - near 정규식으로 텍스트 검색
- python - for 루프로 튜플을 채우는 방법
- javascript - 동일한 페이지에서 동일한 ID를 가진 여러 슬라이더를 사용하는 방법은 무엇입니까?
- 가능한 경우 중단없이 루프에서 벗어나는 방법
- python - 셀레늄으로 페이지 콘텐츠를 얻는 방법
- python - 파일에서 텍스트를 읽고 내림차순으로 정렬하는 방법은 무엇입니까?
- python - 파이 게임에서 아랍어/페르시아어 텍스트와 글꼴을 수정하는 방법은 무엇입니까?
- c# : LINQ가있는 목록을 만듭니다
- python - 다른 색상으로 3D PCA를 그리는 방법은 무엇입니까?
- c# - 데이터가 구성되지 않은 텍스트 파일에서 읽는 방법은 무엇입니까?
- python - 텍스트 파일에서 사전을 어떻게로드합니까?
- c# - dotnet cli에서 "-optimize"를 어떻게 사용합니까?
- php - 응용 프로그램이 OS와 호환되는지 어떻게 알 수 있습니까?
- 파이썬 스크래피에서 텍스트 만 얻을 수있는 방법
- html div 및 css로 모양을 만드는 방법
관련 질문
- javascript : 브라우저에서 페이지 로드 시 오디오 자동 재생
- javascript : jQuery 인라인을 어떻게 사용합니까?
- javascript : [복제] 클릭 시 버튼 색상 전환
- javascript : 버튼 클릭으로 커서를 변경하는 방법
- javascript : TypeError: data.forEach는 함수가 아닙니다.
- javascript : .click 토글 기능을 어떻게 재설정합니까?
- javascript : HTML 전화번호 유효성 검사
- javascript : jquery를 사용하여 카테고리에 따라 관련 없는 div를 페이드 아웃하는 메뉴
- javascript : html, css, js로 onclick 이벤트를 어떻게 할 수 있습니까?
- javascript : codepen.io 프로필 이미지 업로드 JQuery가 작동하지 않음
필요한 것은 CSS 만 사용하여 수행 할 수 있습니다.
data
에서 호버에 표시 할 값을 배치하여td
의 속성attr()
를 사용하여 psuedo 요소의 내용을 쉽게 읽을 수 있습니다. . 그런 다음 비슷한 기술을 사용하여 다음과 같이 호버에서 테두리의 왼쪽과 오른쪽을 만들 수 있습니다.