mehrere Frage zu meiner Webseite

[black79]

Guten Tag rzsout,
nochmal vielen Dank für Deine Geduld und Hilfe.
Bin gerade dabei einige Ratschläge von Dir umzusetzen (HTML 5 und CSS 3) das Layout hat sich etwas geändert :-) 
vielleicht nicht mehr so schön wie vorher mit Boostrap.

Das mit dem Button (in Tabelle Button löschen) in JavaScript habe ich noch nicht so ganz verstanden.
Hast Du da ein Beispiel für mich?

https://oesoft.de

[rzscout]

Hi black79,
könntest du da mehr ins Detail gehen. Ich weiß den Zusammenhang zu deiner Frage nicht mehr oder was du mit deiner Frage möchtest.

Das mit dem Button (in Tabelle Button löschen) in JavaScript habe ich noch nicht so ganz verstanden.

Hast Du da ein Beispiel für mich?

VG rzscout

[black79]

Hi black79,
könntest du da mehr ins Detail gehen. Ich weiß den Zusammenhang zu deiner Frage nicht mehr oder was du mit deiner Frage möchtest.

Das mit dem Button (in Tabelle Button löschen) in JavaScript habe ich noch nicht so ganz verstanden.

Hast Du da ein Beispiel für mich?

VG rzscout

das hattest Du mal geschrieben :

Für den Button würde ich keine ID vergeben sondern mit CSS-Klasse arbeiten und mit data-*. Vergebe allen Button die gleiche CSS-Klasse um alle anzusprechen. Dann arbeite mit der Javascript-Methode 'queryselectorAll' um alle Button zu selektieren. Verwende eine forEach-Anweisung wo du allen Button zusammen einen EventListener erstellst. Verwende dann die Informationen aus dem data-* um den Button zuzuordnen. Jetzt kannst du via XMLHttpRequest zu PHP schicken welchen Buttoninfos geschickt werden soll.

Ich glaube ich werde mal ein Beispiel für dich basteln, damit du damit arbeiten kannst. Wenn ich Zeit finde bastel ich dir eine Vorlage.

 also ich habe in der Tabelle einen Button, der vereinzelt Datensätze löschen soll (aus der mariaDB).

zurzeit ist der Button ohne Funktion, alert wird zum testen nicht ausgelöst.

Code:

fieldk = document.createElement('td');
                    fieldk.className = 'fieldk';
                    btn = document.createElement("button");
                                        btn.innerHTML = 'löschen';
                    fieldk.appendChild(btn);
                    line.appendChild(fieldk);
                    btn.onclick = function () {
                        alert(test);
                    }

[rzscout]

Code:

fieldk = document.createElement('td');
fieldk.className = 'fieldk';
btn = document.createElement("button");
btn.textContent = 'löschen';
btn.classList.add('btn-rmv');
line.appendChild(fieldk);
fieldk.appendChild(btn);

document.querySelectorAll('.btn-rmv').forEach(function(item) {
    item.addEventListener('click', () => {
        alert('test');
    });
});

Du solltest erst 'fieldk' via 'appendchild' hinzufügen dann 'btn'. Verwende auch bitte die Javascript-Methode 'textContent' statt 'innerHTML'. Du solltest die Button insgesamt mit einer Klasse austatten. In dem Oberen Beispiel bekommen die Button die CSS-Klasse 'btn-rmv'. Diese kannst du dann in Javascript selektieren via 'querySelectorAll'. Damit werden alle Elemente mit der angegebenen Klasse selektiert. Als letztes verwende ich hier die Javascript-Methode 'forEach'.  Die 'forEach'-Schleife geht jedes Element aus der Selektion einzelnd an. mit 'item' spreche ich das aktuelle Element an und gebe dem Element einen EvenListener für den Event 'click'. Dieser löst eine Javascript-Methode 'alert' aus.

[black79]

Code:

fieldk = document.createElement('td');
fieldk.className = 'fieldk';
btn = document.createElement("button");
btn.textContent = 'löschen';
btn.classList.add('btn-rmv');
line.appendChild(fieldk);
fieldk.appendChild(btn);

document.querySelectorAll('.btn-rmv').forEach(function(item) {
    item.addEventListener('click', () => {
        alert('test');
    });
});

Du solltest erst 'fieldk' via 'appendchild' hinzufügen dann 'btn'. Verwende auch bitte die Javascript-Methode 'textContent' statt 'innerHTML'. Du solltest die Button insgesamt mit einer Klasse austatten. In dem Oberen Beispiel bekommen die Button die CSS-Klasse 'btn-rmv'. Diese kannst du dann in Javascript selektieren via 'querySelectorAll'. Damit werden alle Elemente mit der angegebenen Klasse selektiert. Als letztes verwende ich hier die Javascript-Methode 'forEach'.  Die 'forEach'-Schleife geht jedes Element aus der Selektion einzelnd an. mit 'item' spreche ich das aktuelle Element an und gebe dem Element einen EvenListener für den Event 'click'. Dieser löst eine Javascript-Methode 'alert' aus.

 Hallo, habe Deine 'forEach' Schleife ausprobiert :-( leider gibt es ein paar komplikationen mit der Schleife.

 1.) der Aufbau der Tabelle dauert länger -> millisec. ?
 2.) Button ausgelöst -> Alert wird angezeigt -> quittiert mit ok -> erneut wird das Alertfenster angezeigt -> endlosschleife

 mehr kann ich leider zurzeit nicht sagen.

[rzscout]

Hi black79,

ich hoffe du hast den Teil nicht in die gleiche Schleife getan wie der obere Bereich:

Code:

document.querySelectorAll('.btn-rmv').forEach(function(item) {
    item.addEventListener('click', () => {
        alert('test');
    });
});

Dieser Teil muss am Ende stehen und darf nicht in der gleichen Funktion/Schleife sein wie der Teil oben, sonst werden ganz, ganz viele EvenListener an die Button gehängt anstatt einen. Ich schreibe aber eine andere Lösung für dich.

[black79]

Hi black79,

ich hoffe du hast den Teil nicht in die gleiche Schleife getan wie der obere Bereich:

Code:

document.querySelectorAll('.btn-rmv').forEach(function(item) {
    item.addEventListener('click', () => {
        alert('test');
    });
});

Dieser Teil muss am Ende stehen und darf nicht in der gleichen Funktion/Schleife sein wie der Teil oben, sonst werden ganz, ganz viele EvenListener an die Button gehängt anstatt einen. Ich schreibe aber eine andere Lösung für dich.

Oh, mein Fehler