Warum hängt die App-Funktion jQuery die Tabelle nicht an?

Question

Ich habe mich hier auf stackoverflow umgesehen, viele genehmigte Antworten gefunden, aber keine konnte mir helfen.

Also, was ich kann im Grunde kommen mit ist diese Tabelle Code

<table id="tableid" class="table table-responsive"> 
    <thead> 
    <tr> 
     <th>header1</th> 
     <th>header2</th> 
    </tr> 
    </thead> 
    <tbody id="tbItems"> 
    <tr> 
     <td>item1</td> 
     <td>item2</td> 
    </tr>  
    </tbody> 
</table> 
    <button type="button" id="btnAddItem" onclick="addProduct">Add</button> 

und diese JS-Code

var $tableS = $('#tableid'); 

function addProduct() { 
    $tableS.append("<tr><td>item2</td><td>item2</td></tr>"); 
} 

aber ich habe 0 Ideen, warum es nicht funktioniert. Danke!

Link zu jsfiddle: https://jsfiddle.net/LvvbLcn2/1/

Answer 1

Sie Klammern in dem Onclick-Attribut verpasst:

<button type="button" id="btnAddItem" onclick="addProduct">Add</button> 

Hier wird das Arbeitsbeispiel auf jsfiddle:

https://jsfiddle.net/LvvbLcn2/6/

Answer 2

Bitte überprüfen Sie diesen Link aus

https://jsfiddle.net/LvvbLcn2/1/

$(document).ready(function(){ 
    var $tableS = $('#tableid'); 

    $("#btnAddItem").on("click", function(){ 
     $tableS.append("<tr><td>item2</td><td>item2</td></tr>"); 
    }); 
}); 

1. einschließen jquery Link
2. Code enthalten, innerhalb document.ready