Javascript로 테이블 행을 추가 할 수 없습니다. <Form> 요소

Question

다음 스크립트는 테이블 행을 성공적으로 추가하지만 테이블 요소의 맨 위와 맨 아래를 추가하면 작동하지 않습니다.

<script> 
     function addrow() { 
     var counter = 1; 
     $('#exampleTableTools').append('<tr><td style="min-width:150px;"><input type="text" class="form-control" name="name[]"></td><td><select class="form-control" name="type[]"><option selected value="0">Text</option><option value="1">Image</option><option value="2">Image slide show</option><option value="3">Custom link</option><option value="4">Custom content</option><option value="5">Custom HTML</option></select></td><td><button type="button" class="btn btn-default" onclick="deleteRow(this)"><i class="icon wb-trash" aria-hidden="true"></i></button></td></tr> ') 
     counter = counter + 1; 
    }; 

    function deleteRow(t) { 
     var row = t.parentNode.parentNode; 
     document.getElementById("exampleTableTools").deleteRow(row.rowIndex); 
     //console.log(row); 
    } 
    </script> 

이 스크립트

테이블을

<table class="table table-hover table-striped" id="exampleTableTools" 
    data-page-size="10"> 
    <thead> 
     <tr> 
     <th class="col1" data-toggle="true">Title</th> 
     <th class="col2">Type of content</th> 
     <th>Operations</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr>{here this javascript add td and tr}</tr> 
    </tbody> 
</table> 

다음의 행을 추가하지만 난 테이블과 바닥의 요소 가기를 추가 할 때 작동하지 않습니다. 친절하게 도와주세요

Answer 1

JS와 jQuery를 모두 사용하는 이유는 무엇입니까? `어디에 * 당신은`

를 추가 *

<script> 

function addrow() 
{ var counter=1; 
    $('#exampleTableTools').append('<tr><td style="min-width:150px;"><input type="text" class="form-control" name="name[]"></td><td><select class="form-control" name="type[]"><option selected value="0">Text</option><option value="1">Image</option><option value="2">Image slide show</option><option value="3">Custom link</option><option value="4">Custom content</option><option value="5">Custom HTML</option></select></td><td><button type="button" class="btn btn-default delete-row"><i class="icon wb-trash" aria-hidden="true"></i></button></td></tr> ') 
    counter=counter+1; 
}; 

$('.delete-row').on('click', function(){$(this).parents('tr').remove();}) 
</script>