다음 코드가 있으며 자바 스크립트 배열을 사용하여 HTML 테이블을 생성합니다.
<HTML lang='en'>
<head>
<style>
table {
border-collapse: collapse;
}
table tr td {
border: 1px solid #000;
padding: 10px;
}
table tr td:hover {
color: red;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
window.addEventListener("load", function(){
var data = ["doge", "cate", "birb", "doggo", "moon", "awkward", "coool", "epic"];
var perrow = 3,
html = "<table><tr>";
for (var i=0; i<data.length; i++) {
html += "<td class=\".cell\" >" + data[i] + "</td>";
var next = i+1;
if (next%perrow==0 && next!=data.length) {
html += "</tr><tr>";
}
}
html += "</tr></table>";
document.getElementById("container").innerHTML = html;
});
</script>
</body>
</HTML>
잘 작동합니다. 내가 원하는 것은 사용자가 테이블의 항목 위로 마우스를 가져 가서 테이블 항목의 값을 콘솔에 기록하도록하는 것입니다.
나는 해결책을 찾았고 어떤 종류의 작품 만 찾았습니다.
$(document).ready(function(){
$('tr').mouseover(function(){
var valueOfTd = $(this).find('td:first-child').text();
console.log(valueOfTd);
});
});
이 솔루션에는 두 가지 문제가 있습니다.
따라서 기본적으로 사용자가 테이블의 항목 위로 마우스를 가져 가서 내용을 콘솔에 출력 할 수 있기를 바랍니다. 바닐라 JS에서 답변을 원합니다.
미리 감사드립니다 ... :)
여기에 한 가지 접근 방식이 있습니다. 테이블을 생성 한 후이 코드를 실행합니다 (바로 뒤에 올 수 있음 document.getElementById("container").innerHTML = html;).
var rows = document.getElementsByTagName('tr');
Array.from(rows).forEach(function(tr) {
tr.addEventListener('mouseover', function(event) {
console.log(event.target.textContent);
});
});
설명:
getElementsByTagName()<TR>문서에서의 컬렉션을 반환합니다 . (이를 document.querySelectorAll('tr')위해 jQuery와 유사한 CSS 선택기를 사용하여 요소를 찾을 수있는를 사용할 수도 있습니다 .)Array.from이전 호출에서 반환 된 컬렉션을 일반 JS Array로 변환하여 호출 할 수 forEach있습니다.addEventListenera <TR>가 마우스 오버 될 때 발생하는 콜백 함수를 연결하는 데 사용 합니다 . 이것은 바닐라 JS 이벤트 바인딩 입니다.event콜백 내부 의 매개 변수에는 mouseover 이벤트에 대한 정보가 포함됩니다.event.target입니다. 이것은 <TD>사용자의 커서가 위에 있다는 것을 우리에게 제공합니다 . 이 부분은 약간 미묘하지만 기본적으로 리스너를 부모 요소 ( <TR>s)에 연결할 수 있으며 자식 요소 (the <TD>)를 마우스로 가져 가면 리스너가 호출됩니다 . 실제로 모든 셀에 개별적으로 리스너를 추가 할 필요는 없습니다. 작동 방식에 대한 전체 설명을 보려면 "이벤트 버블 링"을 검색하십시오.)textContent의 속성은 <TD>셀 내부의 텍스트를 제공합니다. 이것은 DOM Node API 의 표준 속성입니다 .이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다