Jquery를 이용한 <tr><td> 태그 추가

Jquery를 이용한 <tr><td> 태그 추가

<button id="addStatementBtn">전표추가</button>

<table class="table table-hover" id="statementTable">

<thead>

<tr>

<th>전표분류</th>

<th>구분</th>

<th>금액</th>

<th>삭제</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

이런 테이블이 있다 가정 했을 때

사용자가 원할 때마다 jquery와 javascript를 이용해<tr><td>를 삽입하여 동적인 페이지를 만들어 볼 수 있다.

구글링을 해서 찾아본 결과 아래와 같은 방법이 가장 마음에 들었다.

개인마다 차이가 있고 완벽한 방법은 아니니 참고하시길 바랍니다.

$("#addStatementBtn").click(function(){

$('#statementTable > tbody:last').append('<tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><button id="removeStatementBtn" onclick="deleteLine(this);">전표제거</button></td></tr>');

});

빨갛게 표시한 부분은 버튼을 만드는 부분인데. 현재 만들어진 <tr><td> 행을 삭제한다.

onclick을 주고

function deleteLine(obj){

var tr = $(obj).parent().parent();

tr.remove();

}

해당 이벤트를 발생시키면 사용자가 원하는 행이 삭제된다.