[JQuery] Append 이용한 Row 추가 삭제

1. Append란?

.append(content, [content])

=> 어떤 요소에 마지막 자식 요소를 새로 추가한다.

content 추가될 HTML 문자열, DOM요소, 또는 jQuery 객체.

html

<button id="add_cert">addrow</button>
<table >
    <tr>
        <th>name</th>
        <th>price</th>
        <th></th>
    </tr>
    <tbody id="asdf">
        <tr><td>example</td><td>123,456</td></tr>
    </tbody>
    
</table>

script

<script>
var cnt2 = 0;
$("#add_cert").click(function(){
    var cnt = $(".Rowtr").length;
    if(cnt<=30){
        var addrow = '<tr class="Rowtr" id="Rowtr_'+cnt2+'"><td><input type="text" id="name_"'+cnt2+' value="'+cnt2+'"/></td>
    <td><input type="text" id="price_"'+cnt2+'/></td><td><a onclick="removeRow('+cnt2+')">-</a></td></tr>';
 
        $("#asdf").append(addrow);
        cnt++;
        cnt2++;
    }
});
function removeRow(cnt){
    $("#Rowtr_"+cnt).remove();
}
</script>

행은 30이 최대, 추가 삭제 가능