Hinzufügen von Tabellenzeilen nach JavaScript funktioniert nicht in <Form> Element

Question

Folgende Skript hinzufügen Tabelle Zeile erfolgreich, aber wenn ich Form Element oben in der Tabelle und unten, es funktioniert nicht.

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

Dieses Skript hinzufügen Row in Tabelle

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

folgenden, aber wenn ich Element oben in der Tabelle und unten hinzufügen es funktioniert nicht. Bitte helfen

Answer 1

Warum verwenden Sie sowohl JS und jQuery? Bitte versuchen

folgende

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