JS
221230 JS 노드생성,추가 실습
주영재
2022. 12. 30. 18:29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-spacing: 0;
border-collapse: collapse;
}
thead th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<button type="button" id="addLists">5개추가하기</button>
<button type="button" id="addList">1개추가하기</button>
<table>
<thead>
<tr>
<th>교시</th>
<th>훈련과목</th>
<th>담당자</th>
<th>훈련내용</th>
</tr>
</thead>
<tbody class="todoList">
<tr>
<td><input type="text" size="3"></td>
<td><input type="text"></td>
<td><input type="text" size="5"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
<script>
var addList = document.getElementById("addList");
var addLists = document.getElementById("addLists");
var todoList = document.querySelector(".todoList");
addList.addEventListener("click", ADD);
function ADD() {
var tr = document.createElement("tr");
for (var i = 1; i <= 4; i++) {
var a = document.createElement("td");
var ain = document.createElement("input");
ain.type = "text";
if (i == 1) ain.size = "3";
if (i == 3) ain.size = "5";
a.appendChild(ain);
tr.appendChild(a);
}
todoList.appendChild(tr);
//이걸
//todoList.appendChild(tr.cloneNode(true));
//로 해결할 수도 있다.
}
addLists.addEventListener("click", function () {
for (var i = 0; i < 5; i++) {
ADD();
}
})
</script>
</body>
</html>
