<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style media="screen">
table {
border-collapse: collapse;
}
th {
border: 1px solid gray;
background-color: #dddddd;
width : 250px;
}
td {
border:1px solid gray;
}
</style>
<script type="text/javascript">
function gid(id) {
return document.getElementById(id);
}
function appendRow(newWord) {
let mytbody = gid("myTbody");
// mytbody 객체를 이용하여추가 할 행을 먼저 생성한다.
let newRow = mytbody.insertRow(mytbody.rows.length)
// 새로 생성한 행 newRow에 새 칼럼들(cell)을 생성한다. -11월 21일까지 내용
let cell0 = newRow.insertCell(0);
let cell1 = newRow.insertCell(1);
cell0.innerHTML = `<b>${newWord}</b>`;
cell1.innerHTML = newWord.length;
cell1.addEventListener("click", killRow);
cell0.addEventListener("click", insertFront);
}
function insertFront() {
let input = gid("textinput");
if(input.value.length <= 0) // 입력된내용이없으면
return false; // 아무일도 하지않고 함수 종료
let rowIndex = this.parentNode.rowIndex -1;
let myTbody = gid("myTbody");
// 추가할 위치(현재 행의 바로 직전 위치)에 새 행을 만들어 연결한다
let newRow = myTbody.insertRow(rowIndex);
// 새로 추가 된 행에 셀을 2개 생성한다.
let cell0 = newRow.insertCell(0);
let cell1 = newRow.insertCell(1);
cell0.innerHTML = `<b>${input.value}</b>`
cell1.innerHTML = input.value.length;
cell1.addEventListener("click", killRow);
cell0.addEventListener("click", insertFront);
}
function killRow() {
let rowIndex = this.parentNode.rowIndex;
gid("myTbody").deleteRow(rowIndex-1);
}
function onKeyDown(){
if (event.keyCode == 13) {
let input = gid("textinput");
if (input.value.length > 0){
//appendRow(gid("textinput").value);
appendRow(input.value);
//gid("codeCheck").innerHTML +=value + ", ";
input.value = ""; // input clear
}
}
}
window.onload = function () {
gid("textinput").addEventListener("keydown", onKeyDown);
}
</script>
<body>
<h1>Text & Input & Table Control</h1>
<hr>
Input : <input type="text" id="textinput" size=30>
<br><p id="codeCheck"></p>
<hr>
<table>
<thead>
<th>단어</th>
<th>단어 문자열 길이</th>
</thead>
<tbody id="myTbody">
</tbody>
</table>
</body>
</html>
