jQuery 테이블 행 동적 추가/삭제

jQuery 테이블 행 동적 추가/삭제

패턴 1

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 

<script type="text/javascript">

$(function() {

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

var row = "<tr>";

row += "<td><input type='text' name='idx[]' value='' /></td>";

row += "<td><span>날 누르면 삭제가 됨</span></td>";

row += "</tr>";

$("#table").append(row);

});

$("#table").on("click", "span", function() {

$(this).closest("tr").remove();

});

});

</script>

<button id="addTR">날 누르면 추가가 됨</button>

<table id="table">

<tr>

<td><input type="text" /></td>

</tr>

</table>

출처 : http://nyaongnyaong.com/1147

----------------------------------------------------------------------

패턴2

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

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

<hr>

<table id="mytable" border="1" cellspacing="3">

  <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>

출처 : https://zetawiki.com/