jQuery Table Tr 에 Html 태그 추가하기 삭제하기

jQuery Table Tr 에 Html 태그 추가하기 삭제하기

by

동적으로 테이블에 신규 TR 태그와 INPUT을 넣어서 데이터를 등록/수정하는 경우가 최근 들어 자주 발생하게 되었다. 이런 경우 jQuery의 append(), remove()를 이용해서 멋들어지게 만들어 보자

빠른링크

TR에 HTML 태그 추가하기- append()

append()는 맨 뒤에 HTML 태그를 추가하는 기능으로, 그리드가 여러 개 있는 상태에서 하단에 신규로 추가 시 활용하면 좋을 거 같네요. 반대로 맨 앞에 추가하는 prepend()도 있습니다.

<table>
   <tbody id="list-fm">
      <tr>
         <td><input type="text" name="goods_no[]" value="100" /></td>
      </tr>
      <tr>
         <td><input type="text" name="goods_no[]" value="200" /></td>
      </tr>
   </tbody>
</table>
<button type="button" onclick="return addTr();">TR 추가하기</button>
function addTr() {
   var addHtml = '<tr>';
   addHtml += '<td><input type="text" name="goods_no[]" value="300" /></td>';
   addHtml += '</tr>';
   $("#list-fm").append(addHtml);
}

결과

<table>
   <tbody id="list-fm">
      <tr>
         <td><input type="text" name="goods_no[]" value="100" /></td>
      </tr>
      <tr>
         <td><input type="text" name="goods_no[]" value="200" /></td>
      </tr>
      <tr>
         <td><input type="text" name="goods_no[]" value="300" /></td>
      </tr>
   </tbody>
</table>

.append()




TR에 원하는 태그 삭제하기 – remove()

remove()는 지정한 HTML 태그를 삭제하는 기능입니다. 아래 예제는 tr별 button으로 삭제되는 예제입니다. button의 class인 .tr-del 클릭 시 해당 idx 값을 가져와서 tr을 삭제하는 예제입니다.

<table>
   <tbody id="list-fm">
      <tr>
         <td><input type="text" name="goods_no[]" value="100" /> <button type="button" class="tr-del">TR 삭제하기</button></td>
      </tr>
      <tr>
         <td><input type="text" name="goods_no[]" value="200" /> <button type="button" class="tr-del">TR 삭제하기</button></td>
      </tr>
      <tr>
         <td><input type="text" name="goods_no[]" value="300" /> <button type="button" class="tr-del">TR 삭제하기</button></td>
      </tr>
   </tbody>
</table>

$(".tr-del).click(function(idx){
   $("#list-fm tr").eq(idx).remove();
})

결과

<table>
   <tbody id="list-fm">
      <tr>
         <td><input type="text" name="goods_no[]" value="100" /> <button type="button" class="tr-del">TR 삭제하기</button></td>
      </tr>
      <tr>
         <td><input type="text" name="goods_no[]" value="200" /> <button type="button" class="tr-del">TR 삭제하기</button></td>
      </tr>
   </tbody>
</table>

.remove()