"JQuery 테이블 비우기"의 두 판 사이의 차이

2015년 8월 6일 (목) 14:01 판

jQuery 테이블 비우기

1 예시 1: tr 제거

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
    $('#btn-empty').click( function() {
        $( '#mytable tr').remove();
    });
});
</script>

<button id='btn-empty'>테이블 비우기</button>
<hr>

<table id="mytable" border="1" cellspacing="0">
    <tr>
        <th>컬럼1</th><th>컬럼2</th>
    </tr>
    <tbody>
        <tr><td>1</td><td>한놈</td></tr>
        <tr><td>2</td><td>두시기</td></tr>
        <tr><td>3</td><td>석삼</td></tr>
    </tbody>
</table>

2 예시 2: tbody 비우기

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
    $('#btn-empty').click( function() {
        $( '#mytable > tbody:last').empty();
    });
});
</script>

<button id='btn-empty'>테이블 비우기</button>
<hr>

<table id="mytable" border="1" cellspacing="0">
    <tr>
        <th>컬럼1</th><th>컬럼2</th>
    </tr>
    <tbody>
        <tr><td>1</td><td>한놈</td></tr>
        <tr><td>2</td><td>두시기</td></tr>
        <tr><td>3</td><td>석삼</td></tr>
    </tbody>
</table>

3 같이 보기

@@ 2번째 줄: / 2번째 줄: @@
 ;jQuery 테이블 비우기
-==예시 1==
+==예시 1: tr 제거==
 <source lang='html5'>
 <script src="//code.jquery.com/jquery.min.js"></script>
@@ 29번째 줄: / 29번째 줄: @@
 <jsfiddle height='200'>d2hwq5y6</jsfiddle>
-==예시 2==
+==예시 2: tbody 비우기==
 <source lang='html5'>
 <script src="//code.jquery.com/jquery.min.js"></script>