디지털 컨버전스/Java Script

[JQuery] 동적테이블 - 애니메이션 적용

gimyeondong 2020. 4. 20. 15:22

입력값 last-child로 선택

<!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>
        <script>

            $(function(){
                var index =1 ;

                $("#input").on("click",function(){
                    var title = $("#title").val();
                    var contents = $("#contents").val();
                    var writer = $("#writer").val();
                    
                    var tr = $("<tr></tr>");
                    tr.append("<td class=index>"+index++);
                    tr.append("<td>"+title);
                    tr.append("<td>"+contents);
                    tr.append("<td>"+writer);
                    $("table").append(tr);
                    
                   $("tr:last-child").hide();
                    
                   $("tr:last-child").fadeIn(1000);
                })



                $("#del").on("click",function(){  
                    var tds = $("td");
                    var delIndex = $("#delIndex").val();
                    for(var i =0; i<tds.length;i++){
                        if($(tds[i]).text() == delIndex &&
                          $(tds[i]).attr("class") =="index"){
                            $(tds[i]).parent().fadeOut(1000,function(){
                                
                            $(tds[i]).parent().remove();
                            })
                        }
                    }
                })
            })
        </script>
    </head>
    <body>
        <fieldset>
            <legend>Form</legend>
            <input type="text" id="title"><br>
            <input type="text" id="contents"><br>
            <input type="text" id="writer"><input type="button" id="input" value="입력"><br>
            <input type="text" id="delIndex"><input type="button" id="del" value="삭제"><br>

        </fieldset>
        <table border="1">
            <tr>
                <td>글 번호</td>
                <td>글 제목</td>
                <td>글 내용</td>
                <td>작성자</td>
            </tr>

        </table>
    </body>
</html>

강사님 코드 

 $("table").append(tr); 이전에 hide,

 append 후 fadeIn

                $("#input").on("click",function(){
                    var title = $("#title").val();
                    var contents = $("#contents").val();
                    var writer = $("#writer").val();

                    var tr = $("<tr></tr>");
                    tr.append("<td class=index>"+index++);
                    tr.append("<td>"+title);
                    tr.append("<td>"+contents);
                    tr.append("<td>"+writer);
                    tr.hide();
                    $("table").append(tr);
                    tr.fadeIn(1000);
                })

 

<!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>
        <script>

            $(function(){
                var index =1 ;

                $("#input").on("click",function(){
                    var title = $("#title").val();
                    var contents = $("#contents").val();
                    var writer = $("#writer").val();

                    var tr = $("<tr></tr>");
                    tr.append("<td class=index>"+index++);
                    tr.append("<td>"+title);
                    tr.append("<td>"+contents);
                    tr.append("<td>"+writer);
                    tr.hide();
                    $("table").append(tr);


                    tr.fadeIn(1000);
                })



                $("#del").on("click",function(){  
                    var tds = $("td");
                    var delIndex = $("#delIndex").val();
                    for(var i =0; i<tds.length;i++){
                        if($(tds[i]).text() == delIndex &&
                           $(tds[i]).attr("class") =="index"){
                            $(tds[i]).parent().fadeOut(1000,function(){

                                $(tds[i]).parent().remove();
                            })
                        }
                    }
                })
            })
        </script>
    </head>
    <body>
        <fieldset>
            <legend>Form</legend>
            <input type="text" id="title"><br>
            <input type="text" id="contents"><br>
            <input type="text" id="writer"><input type="button" id="input" value="입력"><br>
            <input type="text" id="delIndex"><input type="button" id="del" value="삭제"><br>

        </fieldset>
        <table border="1">
            <tr>
                <td>글 번호</td>
                <td>글 제목</td>
                <td>글 내용</td>
                <td>작성자</td>
            </tr>

        </table>
    </body>
</html>