관리 메뉴

심재운 블로그

jQuery append 행추가 및 삭제 본문

프로그래밍/jQuery

jQuery append 행추가 및 삭제

재우니 2017.09.05 12:29


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>


0 Comments
댓글쓰기 폼