jQuery tr 추가 (입력창 추가), jQuery 테이블 행 추가/삭제, selector last name

JavaScript & HTML

by husks 2016. 8. 18. 09:55

웹페이지를 개발하다 보면 동적으로 입력창을 추가해야 할 경우가 발생합니다.

일반적으로 추가 버튼을 누르면 정보를 입력하는 부분이 추가 되고 삭제를 누르면 해당 입력창 부분이 삭제 되는 예제 입니다.

아래 정산담당자 추가 버튼을 눌러 보세요.

↓↓↓↓↓↓↓↓↓↓↓

정산담당자
메모

아래는 소스 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>last demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <button name="addStaff">정산담당자 추가</button>
    <br>
    <br>
    <table border="1" style="width:950px">
        <tbody>
            <tr name="trStaff">
                <td style="width:150px"><strong>정산담당자</strong></td>
                <td style="width:800px">
                    <input type="text" name="staff_name" placeholder="성명">
                    <input type="text" name="staff_contact" placeholder="연락처1">
                    <input type="text" name="staff_contact2" placeholder="연락처2">
                    <input type="text" name="staff_email" placeholder="이메일">
                    <select name="staff_use_yn">
                        <option value="Y">사용</option>
                        <option value="N">미사용</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><strong>메모</strong></td>
                <td>
                    <textarea style="width:800px" name="memo" rows="3" placeholder="메모를 남겨주세요."></textarea>
                </td>
            </tr>
        </tbody>
    </table>
 
<script>
    //추가 버튼
    $(document).on("click","button[name=addStaff]",function(){
        
        var addStaffText =     '<tr name="trStaff">'+
            '    <td class="active col-md-1"><strong>정산담당자</strong></td>'+
            '    <td class="col-md-11">'+
            '        <input type="text" class="form-control" name="staff_name" placeholder="성명">'+
            '        <input type="text" class="form-control" name="staff_contact" placeholder="연락처1">'+
            '        <input type="text" class="form-control" name="staff_contact2" placeholder="연락처2">'+
            '        <input type="text" class="form-control" name="staff_email" placeholder="이메일">'+
            '        <select class="form-control statusYn" name="staff_use_yn">'+
            '            <option value="Y">사용</option>'+
            '            <option value="N">미사용</option>'+
            '        </select>'+
            '        <button class="btn btn-default" name="delStaff">삭제</button>'+
            '    </td>'+
            '</tr>';
            
        var trHtml = $( "tr[name=trStaff]:last" ); //last를 사용하여 trStaff라는 명을 가진 마지막 태그 호출
        
        trHtml.after(addStaffText); //마지막 trStaff명 뒤에 붙인다.
        
    });
    
    //삭제 버튼
    $(document).on("click","button[name=delStaff]",function(){
        
        var trHtml = $(this).parent().parent();
        
        trHtml.remove(); //tr 테그 삭제
        
    });
</script>
 
</body>
</html>

저작자표시 비영리 변경금지

'JavaScript & HTML' 카테고리의 다른 글

jquery enter key event submit (jquery 엔터키 이벤트) (0)	2016.08.30
jQuery, JavaScript 새로고침(reload) (0)	2016.08.25
jquery 뒤로가기 (0)	2016.08.17
jquery radio checked (라디오 버튼 값으로 선택), 검색 조건 초기 셋팅 (0)	2016.07.14
attr, prop 차이 (0)	2016.06.15