jquery - Query 기초 (동적 테이블 (데이터 추가 / 삭제), integrateTable(정렬(sort))

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
</head>
<body>
 
    <h1>동적 테이블</h1>
 
    <table border="1" id="list_table">
        <colgroup>
            <col style="width: 70px">
            <col style="width: 200px">
            <col style="width: 300px">
            <col style="width: 200px">
        </colgroup>
 
        <thead>
            <tr>
                <th>Number</th>
                <th>Name</th>
                <th>Birth</th>
                <th>Action</th>
            </tr>
        </thead>
 
        <tbody>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>2001/02/24</td>
                <td><a href="#" class="delete-link">삭제</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>일지매</td>
                <td>1999/06/14</td>
                <td><a href="#" class="delete-link">삭제</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>임꺽정</td>
                <td>1997/09/01</td>
                <td><a href="#" class="delete-link">삭제</a></td>
            </tr>
        </tbody>
    </table>
 
    <br>
    <br>
 
    <h3>추가 입력 테이블</h3>
    <table border="1" id="append_table">
        <colgroup>
            <col style="width: 70px">
            <col style="width: 200px">
            <col style="width: 300px">
            <col style="width: 200px">
        </colgroup>
        <thead>
            <tr>
                <th><label for="add_no">번호</label></th>
                <th>이름</th>
                <th>생년월일</th>
                <th>Action</th>
            </tr>
        </thead>
 
        <tbody>
            <tr>
                <td><input type="text" id="add_no"></td>
                <td><input type="text" id="add_name"></td>
                <td><input type="text" id="add_birth"></td>
                <td><button type="button" id="append_row">데이터 추가</button></td>
            </tr>
        </tbody>
    </table>
 
    <script type="text/javascript">
        // 추가
        $("#append_row").on(
                "click",
                function() {
                    $("#list_table").append(
                            $("<tr>").append(
                                    $("<td>").append($("#add_no").val()),
                                    $("<td>").append($("#add_name").val()),
                                    $("<td>").append($("#add_birth").val()),
                                    $("<td>").append(
                                            $("<a>").prop("href", "#")
                                                    .addClass("delete-link")
                                                    .append("삭제"))));
                });
 
        // 삭제
        $("#list_table").on("click", ".delete-link", function() {
            $(this).parent().parent().remove();
        });
    </script>
 
</body>
</html>

동적_테이블.PNG

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
<link rel="stylesheet" href="style.css" type="text/css"
    media="print, projection, screen">
 
<!-- <script type="text/javascript" src="./jquery/jquery-latest.js"></script> -->
<script type="text/javascript" src="./jquery/jquery.tablesorter.js"></script>
<script type="text/javascript" src="./jquery/jquery.tablesorter.min.js"></script>
 
<style type="text/css">
#sampleTable td:nth-of-type(3) {
    text-align: right;
    padding-right: 0.7em;
}
#sampleTable td:nth-of-type(4) {
    text-align: right;
    padding-right: 0.7em;
}
#sampleTable td:nth-of-type(5) {
    text-align: right;
    padding-right: 0.7em;
}
</style>
 
</head>
<body>
 
    <h1>동적 테이블</h1>
 
    <table id="list_table" class="tablesorter">
 
        <thead>
            <tr>
                <th>Number</th>
                <th>Name</th>
                <th>Birth</th>
                <th>Action</th>
            </tr>
        </thead>
 
        <tbody>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>2001/02/24</td>
                <td><a href="#" class="delete-link">삭제</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>일지매</td>
                <td>1999/06/14</td>
                <td><a href="#" class="delete-link">삭제</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>임꺽정</td>
                <td>1997/09/01</td>
                <td><a href="#" class="delete-link">삭제</a></td>
            </tr>
        </tbody>
    </table>
 
    <br>
    <br>
 
    <h3>추가 입력 테이블</h3>
    <table border="1" id="append_table">
        <colgroup>
            <col style="width: 70px">
            <col style="width: 200px">
            <col style="width: 300px">
            <col style="width: 200px">
        </colgroup>
        <thead>
            <tr>
                <th><label for="add_no">번호</label></th>
                <th>이름</th>
                <th>생년월일</th>
                <th>Action</th>
            </tr>
        </thead>
 
        <tbody>
            <tr>
                <td><input type="text" id="add_no"></td>
                <td><input type="text" id="add_name"></td>
                <td><input type="text" id="add_birth"></td>
                <td><button type="button" id="append_row">데이터 추가</button></td>
            </tr>
        </tbody>
    </table>
 
    <script type="text/javascript">
        $("#list_table").tablesorter();
 
        // 추가
        $("#append_row").on(
                "click",
                function() {
                    $("#list_table").append(
                            $("<tr>").append(
                                    $("<td>").append($("#add_no").val()),
                                    $("<td>").append($("#add_name").val()),
                                    $("<td>").append($("#add_birth").val()),
                                    $("<td>").append(
                                            $("<a>").prop("href", "#")
                                                    .addClass("delete-link")
                                                    .append("삭제"))));
                    $("#list_table").trigger("update");
                });
 
        // 삭제
        $("#list_table").on("click", ".delete-link", function() {
            $(this).parent().parent().remove();
            $("#list_table").trigger("update");
        });
    </script>
 
</body>
</html>

+sort.PNG

프로그램언어

프로그램언어

Query 기초 (동적 테이블 (데이터 추가 / 삭제), integrateTable(정렬(sort))

단축키

단축키

jquery를 활용한 입력폼 초기화하기

JS 날짜 자료 비교

JS 첵박스 샘플

JS 타이머 샘플

load() 메소드

Magnific popup conflict with "jquery.nicescroll"

parent of the iframe element selector

popModal jQuery Plugin Examples / 무료 jQuery 팝업 플러그인

POST 방식으로 인수를 전달하고 그 결과를 받아오기

prepend / append - element 추가 (부모/자식 관계)

Query 기초 (동적 테이블 (데이터 추가 / 삭제), integrateTable(정렬(sort))

radio 제어하기

scrolling to top

select box 값 변경, 목록 변경

SELECTBOX MULTIPLE 검색하기

selectbox multiple 선택한 값들 submit 해서 받기

Table을 DIV로 표현하기 (예제)

zeroclipboard - 클립보드 복사하기(자바스크립트 클립보드 복사하기)

[jQuery Plugin] FCKeditor 2.6.5 사용법

[jQuery] input 박스에 maxlength 만큼 입력했을 때 자동으로 다음 박스로 이동하기

로그인

다국어

검색

LANGUAGE

프로그램언어

프로그램언어

Query 기초 (동적 테이블 (데이터 추가 / 삭제), integrateTable(정렬(sort))

단축키

단축키

jquery를 활용한 입력폼 초기화하기

JS 날짜 자료 비교

JS 첵박스 샘플

JS 타이머 샘플

load() 메소드

Magnific popup conflict with "jquery.nicescroll"

parent of the iframe element selector

popModal jQuery Plugin Examples / 무료 jQuery 팝업 플러그인

POST 방식으로 인수를 전달하고 그 결과를 받아오기

prepend / append - element 추가 (부모/자식 관계)

Query 기초 (동적 테이블 (데이터 추가 / 삭제), integrateTable(정렬(sort))

radio 제어하기

scrolling to top

select box 값 변경, 목록 변경

SELECTBOX MULTIPLE 검색하기

selectbox multiple 선택한 값들 submit 해서 받기

Table을 DIV로 표현하기 (예제)

zeroclipboard - 클립보드 복사하기(자바스크립트 클립보드 복사하기)

[jQuery Plugin] FCKeditor 2.6.5 사용법

[jQuery] input 박스에 maxlength 만큼 입력했을 때 자동으로 다음 박스로 이동하기