상세 컨텐츠

본문 제목

클라이언트사이드 - 19-11-25

DEVELOPMENT/클라이언트사이드

by 포근함 간지뽕빨 리턴씨 2019. 11. 25. 16:02

본문

저번에 했던 것 복습 <이전 글 마지막 소스 예제 다듬는 작업>



Source Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!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>
 
cs


관련글 더보기

댓글 영역