<!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++;
                })

                $("#del").on("click",function(){
                    var del_index = $("#del_index").val();
                    $("tbody tr:nth-child("+del_index+")").empty();
                })
            })

        </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>

            </div>
            삭제할 글 번호 :
            <input type="text" id="del_index">
            <input type="button" value="삭제" id="del">
        </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>
                $("#del").on("click",function(){
                    var del_index = $("#del_index").val();
                    $("tbody tr:nth-child("+del_index+")").empty();
                })

"입력값"번째 child인 tr 비우기

구조선택자로 지우는 것은 좋은 방법이 아님!

index 값을 검색해서 삭제하기

<!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);
                   
                })



                $("#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().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>

글번호 항목을 제외한 값이 숫자일 경우 삭제되는 문제 해결

삭제할 인덱스값을 찾고 && 찾은 요소의 클래스가 index인지 체크

                      if($(tds[i]).text() == delIndex &&
                          $(tds[i]).attr("class") =="index"){
                            $(tds[i]).parent().remove();
                        }

강사님 코드

더보기 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.5.0.min.js"></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);
                })

                $("#del").on("click",function(){
                    var delIndex = $("#delIndex").val();
                    var tds = $("td");
                    for(var i = 0;i < tds.length;i++){
                        if($(tds[i]).text() == delIndex &&
                           $(tds[i]).attr("class") == "index"){
                            $(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><button id="input">입력</button><br>
            <input type=text id="delIndex"><button id="del">삭제</button>
        </fieldset>
        <table border=1>
            <tr>
                <th>글 번호</th>
                <th>글 제목</th>
                <th>글 내용</th>
                <th>작성자</th>
            </tr>
        </table>
    </body>
</html>

 

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[JQuery] 동적테이블 - 애니메이션 적용  (0) 2020.04.20
[JQuery] 애니메이션  (0) 2020.04.20
[JQuery] 선택자  (0) 2020.04.20
[JQuery] JQuery의 배열에 기능 적용  (0) 2020.04.20
[JQuery] 동적 테이블  (0) 2020.04.20

+ Recent posts

티스토리툴바