추가 버튼을 눌렀을 때 추가

예를 들어 어떤 테이블이 있다고 하자. 

.html

<a href="#" class="addBtn"> 추가 </a> <table> <tr> <th> 메뉴 </th> <th> 가격 </th> <th> 메뉴 설명 </th> </tr> <tr> <th> <input type="text"> </th> <th> <input type="text"> </th> <th> <input type="text"> </th> </tr> </table>

그 모양은 아래와 같을 것이다.

메뉴	가격	메뉴 설명

우리는 이것을 능동적으로 늘리고 싶다. 이때 jQuery를 이용해서 할 수 있다. 

우선 이벤트를 가질 버튼을 추가한다. 첫 포스트인만큼 설명을 하면 jQuery는 <script></script> 안에 작성해야 한다.

<a>태그를 이용해 이라고 하고 다음과 같이 <table> 태그 위에 추가한다. 참고로 어디든 추가해도 상관없다.

.html

<a href="#"> 추가 </a>

이것을 실행하면 아래와 같은 모양이 출력된다.

추가

메뉴	가격	메뉴 설명

자 이제 jQuery를 추가할 것이다. 여기서 사용할 함수는 click이라는 event 함수와 after 함수를 이용할 것이다.

after 함수는 넣고 싶은 문자열을 특정 위치 뒤에 넣는 함수이다. 

$(selector).after(comment);

위와 같이 사용된다. 예를 들면 <div> 태그에 뒤에 <p>Hello</p>를 넣고 싶다. 그럼 아래와 같이 사용하면 된다.

$('div').after('<p>Hello</p>');

그럼 모든 div 다음에 Hello가 나타날 것이다. 

이제 사용할 함수를 알았으니 다음과 같이 추가한다. 그리고 추가 버튼의 class = "addBtn"을 추가한다.

<script> var comment = "<tr>"; comment += "<th> 메뉴 </th>"; comment += "<th> 가격 </th>"; comment += "<th> 메뉴 설명 </th>"; comment += "</tr>"; comment += "<tr>"; comment += "<th> <input type="text"> </th>"; comment += "<th> <input type="text"> </th>"; comment += "<th> <input type="text"> </th>"; comment += "</tr>"; $('.addBtn').click(function(){ $('tr:last-child').after(comment); }); </script>