※ 소스
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
table {
width: 100%;
}
div {
position:absolute;
}
table, td, th,div {
border : 1px solid black;
border-collapse : collapse;
};
</style>
</head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>TEST</h1>
<table id="tbl1">
</table>
<div id="loc"></div>
<script>
let tbl1 = document.getElementById("tbl1");
let loc = document.getElementById("loc");
let tr = "";
for(let y=1;y<10;y++) {
tr += "<tr>";
for(let x=1;x<10;x++) {
tr += "<td>" + y + x +"</td>";
}
tr += "</tr>";
}
tbl1.innerHTML = tr;
document.onclick = function()
{
var winX = window.pageXOffset;
var winY = window.pageYOffset;
var el = event.srcElement;
if(el.tagName.toLowerCase() != "td")
return;
var rect = el.getBoundingClientRect();
loc.style.top = (winY + rect.top - 1) + "px";
loc.style.left = (winX + rect.left - 1) + "px";
loc.style.width = (rect.width) + "px";
loc.style.height = (rect.height) + "px";
loc.innerHTML = el.innerHTML;
}
</script>
</body>
</html>
728x90
'Software > JavaScript' 카테고리의 다른 글
| Javascript 시작하기 - SVG 디지탈 날짜 및 시계 (0) | 2024.06.14 |
|---|---|
| JavaScript 시작하기 - SVG 디지털시계 (0) | 2024.06.14 |
| NodeJS에서 SQLite3 사용하기 (0) | 2023.12.25 |
| JavaScript 시작하기 - three.js 소개 (0) | 2023.12.10 |
| JavaScript 시작하기 - Code Pan 소개 (0) | 2023.12.03 |