관리 메뉴

드럼치는 프로그래머

[jQuery] 테이블 행 추가/삭제 본문

★─Programing/☆─WebProgram

[jQuery] 테이블 행 추가/삭제

드럼치는한동이 2017. 3. 21. 13:29
<button id='btn-add-row'>행 추가하기</button>
<button id='btn-delete-row'>행 삭제하기</button>
<hr>

<table id="mytable" border="1" cellspacing="0">
  <tr>
    <th>제목</th>
    <th>일시</th>
  </tr>
  <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>안녕 친구들 </td><td>' + time + '</td></tr>');
  });
  $('#btn-delete-row').click(function() {
    $('#mytable > tbody:last > tr:last').remove();
  });
</script>

 


제목 일시

 

[출처] http://zetawiki.com/wiki/JQuery_%ED%85%8C%EC%9D%B4%EB%B8%94_%ED%96%89_%EC%B6%94%EA%B0%80/%EC%82%AD%EC%A0%9C

Comments