[JQuery] 동적 테이블

디지털 컨버전스/Java Script

[JQuery] 동적 테이블

gimyeondong 2020. 4. 20. 10:51

입력한 데이터가 추가되는 테이블 만들기

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
        <style>

            table{
                border: 1px solid black;
            }
            table td{
                border: 1px solid black;
            }
        </style>
        <script>
            $(function(){
                var index=1;
                $("#btn").on("click",function(){

                    var data_title = $(".input_title").val();
                    var data_contents = $(".input_contents").val();
                    var data_writer = $(".input_writer").val();

                    var tr = $("<tr></tr>")
                    tr.append("<td>"+index);
                    tr.append("<td>"+data_title);
                    tr.append("<td>"+data_contents);
                    tr.append("<td>"+data_writer);
                    $(".table").append(tr);
                    
                    index++;
                })
            })

        </script>
    </head>
    <body>
        <div>
            제목 : 
            <input type="text" class="input_title">
        </div>
        <div>
            내용 : 
            <input type="text" class="input_contents">
        </div>
        <div>
            작성자 : 
            <input type="text" class="input_writer">
        </div>
        <div>
            <input type="button" value="테이블에 추가" id="btn">
        </div>
        <table class="table">

            <tr>
                <td class="num">글번호</td>
                <td class="title">제목</td>
                <td class="contents">내용</td>
                <td class="writer">작성자</td>
            </tr>

        </table>

    </body>
</html>

                    var tr = $("<tr></tr>")
                    $(".table").append("<tr>");
                    tr.append("<td>"+index);
                    tr.append("<td>"+data_title);
                    tr.append("<td>"+data_contents);
                    tr.append("<td>"+data_writer);
                    $(".table").append(tr);

삭제 버튼 만들기

                $("#clear").on("click",function(){
                    var tds = $("td");
                    console.log(tds);
                })

remove

                $("#clear").on("click",function(){
                    var tds = $("td");
                    for(var i = o; i< tds.length;i++){
                        tds[i].remove();          
                    }
                })

제목까지 다 지워짐

제목 부분과 추가되는 부분 분리하기

$("#clear").on("click",function(){
                    var tds = $("tbody>tr");
                    for(var i = 0; i< tds.length;i++){
                        tds[i].remove();          
                    }
                })

        <table class="table">
            <thead>
                <tr>
                    <td class="num">글번호</td>
                    <td class="title">제목</td>
                    <td class="contents">내용</td>
                    <td class="writer">작성자</td>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

삭제버튼 추가 전체코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
        <style>

            table{
                border: 1px solid black;
            }
            table td{
                border: 1px solid black;
            }
        </style>
        <script>
            $(function(){
                var index=1;
                $("#btn").on("click",function(){

                    var data_title = $(".input_title").val();
                    var data_contents = $(".input_contents").val();
                    var data_writer = $(".input_writer").val();

                    var tr = $("<tr></tr>");
                    tr.append("<td>"+index);
                    tr.append("<td>"+data_title);
                    tr.append("<td>"+data_contents);
                    tr.append("<td>"+data_writer);
                    $("tbody").append(tr);

                    index++;
                })
                
                $("#clear").on("click",function(){
                    var tds = $("tbody>tr");
                    for(var i = 0; i< tds.length;i++){
                        tds[i].remove();          
                    }
                })
            })

        </script>
    </head>
    <body>
        <div>
            제목 : 
            <input type="text" class="input_title">
        </div>
        <div>
            내용 : 
            <input type="text" class="input_contents">
        </div>
        <div>
            작성자 : 
            <input type="text" class="input_writer">
        </div>
        <div>
            <input type="button" value="테이블에 추가" id="btn">
            <input type="button" value="Clear" id="clear">
        </div>

        <table class="table">
            <thead>
                <tr>
                    <td class="num">글번호</td>
                    <td class="title">제목</td>
                    <td class="contents">내용</td>
                    <td class="writer">작성자</td>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

    </body>
</html>

JQuery 기능과 자바스크립트 기능을 구분해야함

                    var tds = $("tbody>tr");

한개의 요소를 꺼낼때 그 요소는 자바스크립트 엘레먼트

remove는 자바스크립트 기능에 속한다.

                    for(var i = 0; i< tds.length;i++){
                        tds[i].remove();          
                    }

자바스크립트 엘리먼트의 경우 JQuery 기능이 먹히지 않는 경우도 있다.

그런 경우 $(tds[i]) 로 묶어줘야 기능 한다.

배열 상태의 제이쿼리 노드에 기능을 수행하면 모든 요소에 다 적용이 된다.

                $("#clear").on("click",function(){
                //자바스크립트는 반복문을 사용해야암
//                    var tds = $("tbody>tr");
//                    for(var i = 0; i< tds.length;i++){
//                        tds[i].remove();          
//                    }

//	제이쿼리는 전체에 기능 적용
                    $("tbody>tr").remove();
                })

append , prepend

만 바꿔도 삽입 위치 달라진다.

                $("#btn").on("click",function(){

                    var data_title = $(".input_title").val();
                    var data_contents = $(".input_contents").val();
                    var data_writer = $(".input_writer").val();

                    var tr = $("<tr></tr>");
                    tr.append("<td>"+index);
                    tr.append("<td>"+data_title);
                    tr.append("<td>"+data_contents);
                    tr.append("<td>"+data_writer);
                    $("tbody").prepend(tr);

                    index++;
                })

empty

자기자신 내부에 있는 후손과 자손을 지운다.

remove는 자기 자신을 지운다

                $("#clear").on("click",function(){
                    $("tbody").empty();
                })

동적 엘레먼트

프로그램 실행 이후 추가되는 데이터

동적 바인딩

동적 엘레먼트에 이벤트 부여