메뉴 건너뛰기

?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄


정산담당자
메모

아래는 소스 입니다.
<!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>



List of Articles
번호 제목 날짜 조회 수
59 하단 고정 레이어 스타일(CSS) 따라하기 2016.12.22 7729
58 항상 레이어가 정 가운데 위치하는 스크립트 2016.12.22 6908
57 scrolling to top 2016.12.22 6470
56 Ajax를 이용한 데이터 조회시 로딩 로딩 이미지 보이기(jquery이용) file 2016.12.22 10746
55 금액단위 제거 표기 2016.12.22 6217
54 시간 카운트 2016.12.22 7108
53 디자인 셀렉트 박스 & CSS 2016.12.22 6347
52 흐르는 배너 만들기2 2016.12.22 8353
51 bxslider 멈춤현상 2016.12.22 10100
50 jquery 플러그인 링크 모음 2016.12.22 49508
49 html 테이블 고정 (table fixed) 2016.11.18 7116
48 이미지 클릭 손 (cursor:pointer) 2016.11.18 7110
47 jQuery Selector (셀렉터) 2016.11.18 6931
46 날짜 검색 범위 정하기 (jquery) file 2016.11.17 7320
45 jQuery 날짜 비교 (날짜비교) 2016.11.17 10055
44 jQuery 카테고리 선택에 따른 하위 카테고리 변경 (selecbox) file 2016.11.17 8020
43 jquery radio checked (라디오 버튼 값으로 선택), 검색 조건 초기 셋팅 2016.11.17 10039
42 jquery 뒤로가기 2016.11.17 6511
» jQuery tr 추가 (입력창 추가), jQuery 테이블 행 추가/삭제, selector last name 2016.11.17 8542
40 jQuery, JavaScript 새로고침(reload) 2016.11.17 6951
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved