JQuery 테이블 행 추가/삭제

jQuery 테이블 행 추가·삭제

jQuery tr 추가/삭제

1 예시

<style>
thead { background-color: skyblue; }
</style>

<button id='btn-add-row'>행 추가하기</button>
<button id='btn-delete-row'>행 삭제하기</button>
<hr>

<table id="mytable" border="1" cellspacing="0">
  <thead>
    <tr>
      <th>ITEM</th>
      <th>DATETIME</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
  $('#btn-add-row').click(function() {
    var time = new Date().toLocaleTimeString();
    $('#mytable > tbody:last').append('<tr><td>HELLO world</td><td>' + time + '</td></tr>');
  });
  $('#btn-delete-row').click(function() {
    $('#mytable > tbody > tr:last').remove();
  });
</script>

2 같이 보기

• jQuery 테이블 비우기
• 자바스크립트 테이블 행 추가/삭제
• jQuery append()
• jQuery remove()
• HTML table 태그

3 참고

• http://stackoverflow.com/questions/171027/add-table-row-in-jquery
• http://stackoverflow.com/questions/15604122/jquery-delete-table-row