온풀투데이

[문법] 자바스크립트를 활용한 테이블 동적 생성 본문

JAVASCRIPT

[문법] 자바스크립트를 활용한 테이블 동적 생성

온풀 2022. 4. 6. 22:08 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test024_1.html</title>

<script type="text/javascript">

    function addMember()
    {    
        var name = document.getElementById("txtName").value;     
        var tel = document.getElementById("txtTel").value;       
        var addr = document.getElementById("txtAddr").value;  

        // table 엘리먼트 접근
        var tableNode = document.getElementById("memberTbl");

        // 방법 1, 2 공통 변수 선언
        var trNode = document.createElement("tr");         //<tr></tr>
        // 이 문서에 <tr></tr>을 만들겠다     

        // 방법1) 직접 명시 (함수X)
        var tdNode1 = document.createElement("td");     //<td></td> 생성
        var nameNode = document.createTextNode(name);   //<td> 노드에 추가할 "최멘정" 텍스트 노드 생성

        var tdNode2 = document.createElement("td");        //<td></td> 생성
        var telNode = document.createTextNode(tel);     //<td> 노드에 추가할 "010-5555-5555" 텍스트 노드 생성

        var tdNode3 = document.createElement("td");        //<td></td> 생성
        var addrNode = document.createTextNode(addr);   //<td> 노드에 추가할 "경남 김해" 텍스트 노드 생성

        tdNode1.appendChild(nameNode);                   //<td>"최멘정"</td>
        tdNode2.appendChild(telNode);                   //<td>"010-5555-5555"</td>
        tdNode3.appendChild(addrNode);                  //<td>"경남 김해"</td>
        // 이걸 trNode에 끼워 넣어야 함

        trNode.appendChild(tdNode1);
        trNode.appendChild(tdNode2);
        trNode.appendChild(tdNode3);

        tableNode.appendChild(trNode);
        // tableNode에 조립된 trNode 끼워 넣기

        // 방법2) 함수 활용
        /*
        trNode.appendChild(createTdNode(name));            //<tr><td>"최멘정"</td></tr>
        trNode.appendChild(createTdNode(tel));             //<tr><td>"최멘정"</td><td>"010-5555-5555"</td></tr>
        trNode.appendChild(createTdNode(addr));         //<tr><td>"최멘정"</td><td>"010-5555-5555"</td><td> "경남 김해" </td></tr>
        */

        // tableNode.appendChild(trNode);

    }

    function createTdNode(val)
    {
        var textNode = document.createTextNode(val);
        var tdNode = document.createElement("td");
        tdNode.appendChild(textNode);
        return tdNode;
    }

</script>

</head>
<body>

<div>
    <h1>자바스크립트를 활용한 테이블 동적 생성</h1>
    <hr>
</div>

<div>
    <form>
        이름 <input type="text" id="txtName" class="txt"><br>
        전화번호 <input type="text" id="txtTel" class="txt"><br>
        주소 <input type="text" id="txtAddr" class="txt"><br>
        <br>

        <button type="button" onclick="addMember()">회원 정보 입력</button>
        <br><br><br>

        <table border="1" id="memberTbl">
            <tr>
                <td>이름</td><td>전화번호</td><td>주소</td>
            </tr>
            <tr>
                <td>최문정</td><td>010-1111-1111</td><td>인천 연수구</td>
            </tr>
            <tr>
                <td>최만정</td><td>010-2222-2222</td><td>전남 여수</td>
            </tr>
            <tr>
                <td>최몬정</td><td>010-3333-3333</td><td>경남 산청</td>
            </tr>
            <tr>
                <td>최민정</td><td>010-4444-4444</td><td>서울 마포구</td>
            </tr>
        </table>
    </form>
</div>

</body>
</html>
저작자표시 비영리 변경금지

'JAVASCRIPT' 카테고리의 다른 글

[모던 자바스크립트 Deep Dive] 03장 자바스크립트 개발 환경과 실행 방법  (0) 2023.10.17
[모던 자바스크립트 Deep Dive] 02장 자바스크립트란?  (0) 2023.10.16
[모던 자바스크립트 Deep Dive] 01장 프로그래밍  (0) 2023.10.16
[모던 자바스크립트 Deep Dive] 구매 동기  (0) 2023.10.16
[문법] 자바스크립트 객체 : 내장 객체, 사용자 정의 객체, 프로토타입  (0) 2022.04.11
'JAVASCRIPT' Related Articles more