• Wir präsentieren Dir heute ein Stellenangebot für einen Java Entwickler - m/w/d in Augsburg, München, Stuttgart oder Bamberg. Hier geht es zur Jobanzeige

JavaScript Button hinzufügen

B

backyardCoder

Mitglied
Guten Abend

Ich habe ein Problem und zwar möchte ich aus einem JSON file Objekte auslesen und in HTML einer Tabelle hinzufügen, dazu möchte ich noch einen Delete Button in jeder Zeile haben der das jeweilige Objekt löschen kann (über die userId). Es liest meine JSON file immer doppelt ein und der Button wird sofort gedrück also die Methode "deleteUser" wird direkt ausgeführt in der For-Schleife drin. Ich war den ganzen Nachmittag daran an diesem eig. simplen Code aber ich finde den Fehler einfach nicht. Ich hoffe ihr könnt mir meine Augen öffnen und den Fehler den ich übersehe entdecken.

data2:
[
    {
        "userId": 2,
        "userEmail": "peter",
        "userMobile": "efgfr",
        "userPassword": "peter",
        "userName": "hans",
        "authorization": "itResponisble",
        "reservationList": []
    },
    {
        "userId": 3,
        "userEmail": "roberto@hotmail.com",
        "userMobile": "0556742105",
        "userPassword": "hans",
        "userName": "Roberto",
        "authorization": "user",
        "reservationList": []
    },
    {
        "userId": 5,
        "userEmail": "hans",
        "userMobile": "efgfr",
        "userPassword": "hanspeter",
        "userName": "hans",
        "authorization": "itResponisble",
        "reservationList": []
    }
]

Userlist:
<!doctype html>
 <html lang="de">
<head>
 <meta charset="utf-8">

<title>UserListService</title>

 </head>

 <body>
 <h1>UserListe</h1>

 <div>
 <table id="tblUserList">
    <thead>
     <tr>
        <td>UserID</td>
        <td>Name</td>
        <td>E-Mail</td>
        <td>Mobile</td>
        <td>Rolle</td>
     </tr>
    </thead>
 <tbody>

 </tbody>
 </table>
</div>
 <script src="https://code.jquery.com/jquery-3.5.1.js"
 integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
 <script src="UserListJs2.js"></script>
</body>
</html>

UserlListJs:
//Liste der User anfragen
$(document).ready(function(){

    $.getJSON("data2.json").done(handleUsersReply);
    });
    
    function handleUsersReply(users){
        console.log(users);
    
        $("#tblUserliste tbody").empty();
        for(let user of users){
            addUserToList(user);
        }
    }
    
    
    function addUserToList(user){
        let id = user['userId'];
         console.log(id);
    
        var newRow = "<tr>";
        newRow += "<td>" + user['userId'] + "<td>";
        newRow += "<td>" + user['userEmail'] + "<td>";
        newRow += "<td>" + user['userMobile'] + "<td>";
        newRow += "<td>" + user['authorization'] + "<td>";
        newRow += "<td> <button id = 'id'> Delete </button> </td>";
        newRow +="</tr>";
        $("#tblUserliste tbody").append(newRow);
       $("#id").click(deleteUser(id));
      
        
     }

     function deleteUser(id){
        console.log("delete" + id);
    }

Bild der Ausgabe.PNG

So sieht die aktuelle Ausgabe aus dem Live Server von Visual Studio Code aus. Die Ausgabe "delete" + id sollte jedoch erst passieren wenn ich auf den delete btn drücke.



Danke für eure Hilfe
 

Anhänge

  • Bild der Ausgabe.PNG
    Bild der Ausgabe.PNG
    38,1 KB · Aufrufe: 7
kneitzel

kneitzel

Top Contributor
Also ich bin kein JavaScript Experte, aber der Code sieht dubios aus:
a) Wenn ich das richtig verstehe, haben alle Buttons die id "id". Das dürfte so nicht wirklich Sinn ergeben.
b) mit dem $("#id").click(...) rufst Du doch auch direkt die Methode click auf von dem Element. Aber Du willst doch einen Event-Handler haben. EventHandler kannst Du im Button Tag mit OnClick setzen. Also in etwa sowas:
Javascript:
        newRow += "<td>" + user['userId'] + "<td>";
        newRow += "<td>" + user['userEmail'] + "<td>";
        newRow += "<td>" + user['userMobile'] + "<td>";
        newRow += "<td>" + user['authorization'] + "<td>";
        newRow += "<td> <button id = 'u"+ user['userId'] + "' onClick='deleteUser("+ user['userId'] + ")'> Delete </button> </td>";

Das ist jetzt so im Forum geschrieben also kann Tippfehler enthalten. Jeder Button hat damit eine klare id ("u" + userId) und bei onClick wird deleteUser(userId) aufgerufen.

Das generierte HTML kannst Du Dir ja einmal ansehen.

Generell kannst du bei sowas - wenn Du Dir unsicher bist - das HTML erst einmal statisch manuell anlegen und prüfen, so dass Du es richtig hast und die Funktionalität sicher ist. Dann ersetzt Du es nach und nach mit der dynamischen Generierung und schaust, dass wirklich das gewünschte erzeugt wird.
 
B

backyardCoder

Mitglied
Also ich bin kein JavaScript Experte, aber der Code sieht dubios aus:
a) Wenn ich das richtig verstehe, haben alle Buttons die id "id". Das dürfte so nicht wirklich Sinn ergeben.
b) mit dem $("#id").click(...) rufst Du doch auch direkt die Methode click auf von dem Element. Aber Du willst doch einen Event-Handler haben. EventHandler kannst Du im Button Tag mit OnClick setzen. Also in etwa sowas:
Javascript:
        newRow += "<td>" + user['userId'] + "<td>";
        newRow += "<td>" + user['userEmail'] + "<td>";
        newRow += "<td>" + user['userMobile'] + "<td>";
        newRow += "<td>" + user['authorization'] + "<td>";
        newRow += "<td> <button id = 'u"+ user['userId'] + "' onClick='deleteUser("+ user['userId'] + ")'> Delete </button> </td>";

Das ist jetzt so im Forum geschrieben also kann Tippfehler enthalten. Jeder Button hat damit eine klare id ("u" + userId) und bei onClick wird deleteUser(userId) aufgerufen.

Das generierte HTML kannst Du Dir ja einmal ansehen.

Generell kannst du bei sowas - wenn Du Dir unsicher bist - das HTML erst einmal statisch manuell anlegen und prüfen, so dass Du es richtig hast und die Funktionalität sicher ist. Dann ersetzt Du es nach und nach mit der dynamischen Generierung und schaust, dass wirklich das gewünschte erzeugt wird.
Danke viel Mals der Code funktioniert jetzt. Ich hab da wohl was grob verwechselt und ein durcheinander mit den Anführungszeichen.

Danke nochmals und einen schönen Abend
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
T Ich möchte einen Button mit JavaScript ausblenden Angular, React, JQuery - Fragen zu JavaScript 5
J Html Button mit JavaScript ausführen Angular, React, JQuery - Fragen zu JavaScript 5
F Hilfe Button mit Javascript Angular, React, JQuery - Fragen zu JavaScript 2
A Ich habe eine frage zu JavaScript adblock detector? Wenn jemand auf OK Klick soll die Sete neu geladen werden Angular, React, JQuery - Fragen zu JavaScript 1
d.lumpi in javascript input erstellen Angular, React, JQuery - Fragen zu JavaScript 4
Martob282 Belegnummerierungsstempel mit JavaScript erstellen Angular, React, JQuery - Fragen zu JavaScript 26
N Javascript: mehrere Textfelder prüfen ob es sich um eine Zahl handelt und diese zwischen 1 und 49 liegt Angular, React, JQuery - Fragen zu JavaScript 10
S Javascript Canvas RadialGradient -> SVG Gradient Angular, React, JQuery - Fragen zu JavaScript 0
C JavaScript in Siri-Shortcuts zur Webseiten Bedienung Angular, React, JQuery - Fragen zu JavaScript 8
N TypeScript zu JavaScript Angular, React, JQuery - Fragen zu JavaScript 1
M Taste mit Javascript simulieren Angular, React, JQuery - Fragen zu JavaScript 6
B Rauch per Javascript auf Bild packen? Angular, React, JQuery - Fragen zu JavaScript 4
X Ohm Rechner in JavaScript aber was bedeutet Power? Angular, React, JQuery - Fragen zu JavaScript 103
jmar83 JavaScript in Angular 8-Anwendung verwenden Angular, React, JQuery - Fragen zu JavaScript 11
L [JavaScript] Mehrere Variablen für Live-Suche in MySql-DB Angular, React, JQuery - Fragen zu JavaScript 0
D Java Tool um HTML und Javascript zu analysieren Angular, React, JQuery - Fragen zu JavaScript 3
P Hashes in JavaScript Angular, React, JQuery - Fragen zu JavaScript 7
P Zahlen in JavaScript Angular, React, JQuery - Fragen zu JavaScript 3
M Spalte verlinken mit JavaScript Angular, React, JQuery - Fragen zu JavaScript 9
P Angular vor JavaScript lernen? Angular, React, JQuery - Fragen zu JavaScript 1
S Unterstützung in Javascript Angular, React, JQuery - Fragen zu JavaScript 2
W Javascript + couchDB Angular, React, JQuery - Fragen zu JavaScript 2
T Grafische und tabellarische Datendarstellung mit JavaScript Angular, React, JQuery - Fragen zu JavaScript 2
E Javascript wenn Variable aktualisiert wird, dann prüfe Angular, React, JQuery - Fragen zu JavaScript 0
D Javascript um eine Seite in einem PDF Formular ein-/Ausblenden zu lassen Angular, React, JQuery - Fragen zu JavaScript 3
ARadauer JavaScript und replace... Angular, React, JQuery - Fragen zu JavaScript 1
P Richtiges Auslesen von mehreren Daten im JSON Format via JavaScript Angular, React, JQuery - Fragen zu JavaScript 2
n00b4u JavaScript Daten lokal Speichern Angular, React, JQuery - Fragen zu JavaScript 7
C per Javascript auf S4 nach Sensordaten fragen? Angular, React, JQuery - Fragen zu JavaScript 2
B Fehler im JavaScript Angular, React, JQuery - Fragen zu JavaScript 3
C In Wordpress unter Custom-Js mit Javascript den ursprünglichen Code deaktivieren Angular, React, JQuery - Fragen zu JavaScript 0
K Javascript "Bild mit Pfeiltasten automatisch bewegen" HILFE Angular, React, JQuery - Fragen zu JavaScript 0
M Javascript Höhe Angular, React, JQuery - Fragen zu JavaScript 2
N Problem - Google Analytics Tracking Javascript Datei von eigenen Server laden Angular, React, JQuery - Fragen zu JavaScript 1
C Javascript Image.getRGB(x,y) Angular, React, JQuery - Fragen zu JavaScript 1
K Proxy PAC File Javascript Angular, React, JQuery - Fragen zu JavaScript 2
F Von JavaScript "Spaghetticode" zu Backbone.js Angular, React, JQuery - Fragen zu JavaScript 0
H Javascript für wordpress "open new window" Angular, React, JQuery - Fragen zu JavaScript 1
F JavaScript replace funktion Angular, React, JQuery - Fragen zu JavaScript 1
T JavaScript Variable in Klasse ändern Angular, React, JQuery - Fragen zu JavaScript 2
N JavaScript für Touch Devices bei DropDown Menü Angular, React, JQuery - Fragen zu JavaScript 4
T Javascript - Polygon, wieviel % sind gefüllt Angular, React, JQuery - Fragen zu JavaScript 1
K JavaScript Banner Syntax Error Angular, React, JQuery - Fragen zu JavaScript 4
D JavaScript jTable Angular, React, JQuery - Fragen zu JavaScript 2
Fab1 [SUCHE] JavaScript Buch für Umsteiger Angular, React, JQuery - Fragen zu JavaScript 4
T html code per javascript einfügen Angular, React, JQuery - Fragen zu JavaScript 7
nrg RegExp Split \r\n in Javascript Angular, React, JQuery - Fragen zu JavaScript 5
J JavaScript und "import"? Angular, React, JQuery - Fragen zu JavaScript 10
B [Javascript] bytearray to file Angular, React, JQuery - Fragen zu JavaScript 2
L Javascript Maus Funktion Angular, React, JQuery - Fragen zu JavaScript 4
K JavaScript Kontaktformulare Angular, React, JQuery - Fragen zu JavaScript 2
B Javascript popup Angular, React, JQuery - Fragen zu JavaScript 5
D Sontag ? JavaScript fehler ? Angular, React, JQuery - Fragen zu JavaScript 12
L JavaScript for-Schleife Angular, React, JQuery - Fragen zu JavaScript 5
D Nachladen von JavaScript Angular, React, JQuery - Fragen zu JavaScript 7
F JSON Datei in JavaScript einbinden Angular, React, JQuery - Fragen zu JavaScript 1
F Node.js und JavaScript Angular, React, JQuery - Fragen zu JavaScript 3
Chris81T Java <> DWR <> JavaScript/HTML Angular, React, JQuery - Fragen zu JavaScript 2
F Dropdownmenü für JavaScript Angular, React, JQuery - Fragen zu JavaScript 5
F [S] Hilfe beim JavaScript auf Homepage Angular, React, JQuery - Fragen zu JavaScript 4
M JavaScript Objekt .play .reload? Angular, React, JQuery - Fragen zu JavaScript 10
N warum kann ich kein javascript und css in mein html script einbinden Angular, React, JQuery - Fragen zu JavaScript 3
Gossi Frage zu Html (evtl. auch JavaScript?) Angular, React, JQuery - Fragen zu JavaScript 10
L JavaScript Array Angular, React, JQuery - Fragen zu JavaScript 4
C JavaScript: Adresszeile aulesen wenn, dann Angular, React, JQuery - Fragen zu JavaScript 6
C Daten von Java an Javascript übergeben möglich? Angular, React, JQuery - Fragen zu JavaScript 5
K JavaScript tooltip-Frage Angular, React, JQuery - Fragen zu JavaScript 8
P Javascript auf Website aufrufen Angular, React, JQuery - Fragen zu JavaScript 5
P Javascript geht nur offline im safari - online läuft es nicht!? Angular, React, JQuery - Fragen zu JavaScript 3
H JavaScript-Umsetzung Angular, React, JQuery - Fragen zu JavaScript 3
M Hyperlink in JavaScript Angular, React, JQuery - Fragen zu JavaScript 4
K Wie funktioniert Funktionsüberladung in Javascript? Angular, React, JQuery - Fragen zu JavaScript 5
B JavaScript Frühstückspension Angular, React, JQuery - Fragen zu JavaScript 3
Y Javascript onclick box öffnen Angular, React, JQuery - Fragen zu JavaScript 6
J JavaScript Newsticker Angular, React, JQuery - Fragen zu JavaScript 2
A Graph eines Polynoms zweiten Grades in Javascript zeichnen Angular, React, JQuery - Fragen zu JavaScript 32
W JavaScript Hexadezimalwerte in einem http-Request übergeben Angular, React, JQuery - Fragen zu JavaScript 7
J SelectionSort in Javascript ??? Angular, React, JQuery - Fragen zu JavaScript 2
A Javascript mit Arrays Angular, React, JQuery - Fragen zu JavaScript 8
O Javascript soll Bilder an 2 verschiedenen Orten anzeigen Angular, React, JQuery - Fragen zu JavaScript 3
J JavaScript verschachtelte If-Anweisung Angular, React, JQuery - Fragen zu JavaScript 32
M Mit Javascript Objekt-Quellcode anzeigen Angular, React, JQuery - Fragen zu JavaScript 8
C JavaScript aus Servlet starten beim IE9 Angular, React, JQuery - Fragen zu JavaScript 6
S Mit Java oder mit JavaScript Spiele erstellen Angular, React, JQuery - Fragen zu JavaScript 15
J Von javascript zu java HILFE Angular, React, JQuery - Fragen zu JavaScript 5
J HTML frage mit javascript lösbar? Angular, React, JQuery - Fragen zu JavaScript 3
K JavaScript: Replacefunktion mehrmals verwenden Angular, React, JQuery - Fragen zu JavaScript 5
S JavaScript (ECMA) Fehler Angular, React, JQuery - Fragen zu JavaScript 3
X JavaScript Weiterleitung Angular, React, JQuery - Fragen zu JavaScript 2
J Mit Javascript gleichzeitig in 2 Frames Seiten öffnen Angular, React, JQuery - Fragen zu JavaScript 2
F JavaScript Abfrage ob Objekt existiert oder nicht Angular, React, JQuery - Fragen zu JavaScript 2
K Javascript in Sharepoint Angular, React, JQuery - Fragen zu JavaScript 12
M Falls Javascript deaktiviert ist: "Sie müssen Javascript deaktiivert haben..." Angular, React, JQuery - Fragen zu JavaScript 5
I Login mit JavaScript Angular, React, JQuery - Fragen zu JavaScript 9
N Probleme, JavaScript anzupassen Angular, React, JQuery - Fragen zu JavaScript 5
O Mit JavaScript ein leeres Input Field auf den Wert "0" setzen? Angular, React, JQuery - Fragen zu JavaScript 2
A Mit JavaScript AJAX-Calls auslesen? Angular, React, JQuery - Fragen zu JavaScript 4
R Unterschied zwischen Java und Javascript? Angular, React, JQuery - Fragen zu JavaScript 8
raptorrs Javascript: String mit Sonderzeichen zusammenbauen Angular, React, JQuery - Fragen zu JavaScript 7
D Wie JavaScript Projekt in Eclipse erstellen? Angular, React, JQuery - Fragen zu JavaScript 3

Ähnliche Java Themen

Anzeige

Neue Themen


Oben