JQuery

22. JQuery append를 사용하여 테이블에 값 추가하기 예시 - 1

황민준 2022. 9. 6. 10:24

 

input 태그에 여러 개의 값을 받아 append를 통해 테이블에 새로운 값을 계속 추가할 수 있다.

 

해결 방법 : input 태그의 value를 받아온 다음 append에 문자열의 '+' 연산을 사용하여 추가한다.

 

 

 

초기 화면

 

값을 입력한다.

 

 

값이 추가된 것을 볼 수 있다.

 

 

* input에 값을 입력 후 테이블에 해당 값을 추가하는 예시

<!DOCTYPE html>
<head> 
    <meta charset="UTF-8">
    <title>문서 제목</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <style>
        table, td, th {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th,td {
            padding: 10px 20px;
        }
        table{
            width: 100%;
        }
    </style>
</head>
<body> 
    <table>
        <thead>
            <tr>
                <th>학번</th>
                <th>이름</th>
                <th>과목</th>
                <th>학점</th>
                <th>설명</th>
            </tr>
        </thead>
        <tbody id="list"></tbody>
    </table>

    학번 : <input type="text" id="no"><br>
    이름 : <input type="text" id="name"><br>
    과목 : <input type="text" id="sub"><br>
    학점 : <input type="text" id="score"><br>
    설명 : <input type="text" id="desc"><br>

    <button>입력</button>
</body>
<script>
    $("button").click(function(){

        //1. 값을 가져오기
        //2. 어디에 붙일 것인가?
        //3. 어떻게 붙일 것인가?

        //각 td에 input의 value를 가져와서 변수에 저장
        var no = "<td>"+$("#no").val()+"</td>";
        var name = "<td>"+$("#name").val()+"</td>";
        var sub = "<td>"+$("#sub").val()+"</td>";
        var score = "<td>"+$("#score").val()+"</td>";
        var desc = "<td>"+$("#desc").val()+"</td>";

        //append를 하여 tr 태그 사이에 저장했던 변수들을 넣는다.
        $("#list").append("<tr>"+no+name+sub+score+desc+"</tr>");
    });

</script>
</html>