jQuery append 행추가 및 삭제

jQuery 행추가 및 삭제

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

<table class="table table-hovor" id="tblEntAttributes">

<tbody>

<tr>

<td>

first

</td>

<td>

second

</td>

</tr>

<tr>

<td>

third

</td>

<td>

fourth

</td>

</tr>

</tbody>

</table>

<button id="test">appendTo</button>

<button id="test2">append</button>

<script>

var newRowContent = "<tr><td>newcontent</td><td>newcontent2</td></tr>";

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

$(newRowContent).appendTo($("#tblEntAttributes"));

});

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

$(".table-hovor tbody").append(newRowContent);

});

</script>