15-4. JS DOM ์ฐ์ต๋ฌธ์ 1,2
2021. 10. 22. 23:27ใHTML + CSS + JS
728x90
* ์ฐ์ต๋ฌธ์ 1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>์ฐ์ต๋ฌธ์ 1</title>
<style>
ul{
list-style: none;
}
li {
font-size:20px;
line-height: 35px;
}
.check {
color:#ccc;
font-size:20px;
margin-right:25px;
}
.check:hover {
color:#222;
}
</style>
</head>
<body>
<h1>ํ ์ผ ๋ชฉ๋ก</h1>
<ul>
<li><span class="check">✓</span>ํ ์ผ 1 </li>
<li><span class="check">✓</span>ํ ์ผ 2 </li>
<li><span class="check">✓</span>ํ ์ผ 3 </li>
<li><span class="check">✓</span>ํ ์ผ 4 </li>
<li><span class="check">✓</span>ํ ์ผ 5 </li>
</ul>
<script>
var checks = document.querySelectorAll(".check");
for(i = 0; i < checks.length; i++) {
checks[i].addEventListener("click", function() {
this.style.color = "#ccc";
this.parentNode.style.color = "#ccc";
this.parentNode.style.textDecoration="line-through";
});
}
</script>
</body>
</html>
* ์ฐ์ต๋ฌธ์ 2
ํ๊ณผ ์ด์ ์ ๋ ฅํ๋ฉด ํ ์ด๋ธ์ด ์ถ๊ฐ๋๋๋ก
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>์ฐ์ต๋ฌธ์ 2</title>
</head>
<style>
form {
margin-bottom: 30px;
}
input[type="text"]{
width: 30px;
height: 20px;
text-align: center;
}
button {
margin-left: 10px;
}
table {
width: 300px;
}
table, td {
border: 1px solid #ccc;
border-collapse: collapse;
}
td {
padding: 10px;
}
</style>
<body>
<form>
<input type="text" id = "rCount" value="1">ํ
<input type ="text" id = "cCount" value="1">์ด
<button onclick="drawTable(); return false;">์์ฑ</button>
</form>
<div id ="contents">
</div>
<script>
function drawTable() {
var rCount = document.querySelector("#rCount").value;
var cCount = document.querySelector("#cCount").value;
var newTable = document.createElement("table");
for( i = 0; i< rCount; i++) {
var newRow = document.createElement("tr");
for(j = 0; j< cCount; j++) {
var newCell = document.createElement("td");
var newText = document.createTextNode(i + ", " + j );
newCell.appendChild(newText);
newRow.appendChild(newCell);
}
newTable.appendChild(newRow);
}
var contents = document.querySelector("#contents");
contents.appendChild(newTable);
}
</script>
</body>
</html>728x90