๐ป๋ง์ฐ์ค ์๋ก ์ฌ๋ฆฌ๋ฉด ํด๋น ์นธ์ ์ด๋ฏธ์ง ์ถ๊ฐํ๊ธฐ๐ป
๋ง์ฐ์ค๊ฐ ํธ๋ฒํ์ ๋๋ง ์ด๋ฏธ์ง๊ฐ ์์ฑ๋๊ณ ๋ง์ฐ์ค๊ฐ ํด๋น ์นธ์ ๋ ๋๋ฉด ์ด๋ฏธ์ง๊ฐ ์ญ์ ๋๋ค.
๊ธฐ๋ณธ ๋ผ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#tbl1 {
border: 1px solid black;
border-collapse: collapse;
}
#tbl1 td {
border: 1px solid black;
width: 100px;
height: 100px;
}
#tbl1 td img {
display: block;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<table id="tbl1">
<!-- (tr>td*3)*3 -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
์ด๋ฒคํธ
<script>
const list = document.querySelectorAll('#tbl1 td');
for (let i=0; i<list.length; i++) {
list[i].onmouseenter = function() {
//๋นํ์ผ๋ก ์ด๋ฏธ์ง๊ฐ ์ค๋ณต์ผ๋ก ์์ฑ๋๋ ๊ฒ์ ๋ฐฉ์ง
if (event.currentTarget.children.length == 0) {
//๋น์ด์๋ td
const img = document.createElement('img');
img.setAttribute('src', '../asset/images/rect_icon05.png');
event.target.appendChild(img);
}
};
list[i].onmouseleave = function() {
event.currentTarget.removeChild(event.currentTarget.firstElementChild);
};
}
</script>๋นํ์ผ๋ก ์ด๋ฏธ์ง๊ฐ ์ค๋ณต์ผ๋ก ์์ฑ๋๋ ๊ฒ์ ๋ฐฉ์งํ๊ธฐ ์ํด ํ์ฌ target์ ์์์ด 1๊ฐ๋ผ๋ ์๋ ๊ฒ์ ํ์ธํ๋ค.
์ด๋ฏธ์ง๊ฐ ์ด๋ฏธ ์์ฑ๋์๋ค๋ฉด td ์์์ผ๋ก ์ด๋ฏธ์ง๊ฐ ์กด์ฌํ๋ฏ๋ก ์กฐ๊ฑด๋ฌธ์ ๊ฑธ๋ ค ์ด๋ฏธ์ง๊ฐ ์์ฑ๋์ง ์๋๋ค.
๐ป๋ณด์กฐํค์ ๋๋ฆผ ์ํ ํ์ธ ๋ฉ์๋๐ป
event.ctrlKeyevent.shiftKeyevent.altKeyํด๋น ๋ณด์กฐํค๋ฅผ ๋๋ฅด๋ฉด true๋ฅผ ๋ฐํํ๋ค.
๐ปctrlํค๋ฅผ ๋๋ ์ ๋ ๋ค๋ฅธ ์ด๋ฏธ์ง ์์ฑ๐ป
๊ทธ๋ฅ ๋ง์ฐ์ค๋ฅผ ํธ๋ฒํ์ ๋์ Ctrl ํค๋ฅผ ๋๋ฅด๊ณ ํธ๋ฒํ์ ๋ ๋ค๋ฅธ ์ด๋ฏธ์ง๊ฐ ์์ฑ๋๋ค.
๊ธฐ๋ณธ ๋ผ๋ ๋์ผ
<script>
const list = document.querySelectorAll('#tbl1 td');
for (let i=0; i<list.length; i++) {
list[i].onmouseenter = function() {
//๋นํ์ผ๋ก ์ด๋ฏธ์ง๊ฐ ์ค๋ณต์ผ๋ก ์์ฑ๋๋ ๊ฒ์ ๋ฐฉ์ง
if (event.currentTarget.children.length == 0) {
//๋น์ด์๋ td
const img = document.createElement('img');
// ctrlํค๋ฅผ ๋๋ ์ ๋ ๋ค๋ฅธ ์ด๋ฏธ์ง ์์ฑ
if (event.ctrlKey) {
img.setAttribute('src', '../asset/images/rect_icon05.png');
} else {
img.setAttribute('src', '../asset/images/rect_icon06.png');
}
event.target.appendChild(img);
}
};
}
</script>
'WEB > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JavaScript] ํด๋ฆญ ์ด๋ฒคํธ : ํด๋ฆญํ ์์น๋ก ์์ ์ด๋ํ๊ธฐ (0) | 2023.10.12 |
|---|---|
| [JavaScript] ์๋ฐ์คํฌ๋ฆฝํธ๋ก css ์กฐ์ํ๊ธฐ (0) | 2023.10.12 |
| [JavaScript] ์ด๋ฒคํธ์ Hover Table(2) (0) | 2023.10.11 |
| [JavaScript] ์ด๋ฒคํธ ๋ฒ๋ธ๋ง, ์ด๋ฒคํธ ํฐ๋๋ง (0) | 2023.10.11 |
| [JavaScript]๋ฌธ์์ด ์กฐ์ : template (0) | 2023.10.11 |
