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

by 조쉬 posted Jan 16, 2019
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

가 크게 작게 위로 아래로 댓글로 가기 인쇄 
<!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




위로 아래로 댓글로 가기 인쇄

Articles

1 2 3 4 5 6 7 8 9