Hallo,
ich habe hier schon einiges gefragt und teilweise auch umgesetzt. Jetzt habe ich nach einer kleinen Lernpause, endlich mal wieder Zeit.
Da ich schon länger nichts gemacht habe und einiges umgestellt habe ist es möglich, dass ich diese Fragen schon einmal gestellt habe.
Vorab möchte ich mich schon mal dafür entschuldigen!
1.)der Scrollbalken rechts, sollte eigentlich nur neben der Tabelle verlaufen und nicht über die gesamte Webseite. Was muss ich da in CSS anpassen?
2.)die Schrift in der Tabelle soll linksbündig und mittig zentriert verlaufen, welches Attribut sollte man da in CSS verwenden? die Icons in der Tabelle wollte ich auch durch das Attribut „Padding“ anpassen um Platz zu Sparren.
3.)der „Button“ um einen Datensatz (mariaDB) zu löschen ist auch noch ohne Funktion. Das Ermitteln der ID gestaltet sich etwas schwierig. Ich möchte gerne die ID als Variable zwischen speichern und dann als POST (Ajax) an PHP senden (Löschvorgang SQL).
Für die Textausrichtung innerhalb eines Tabellenelements gibt auch mehrere Möglichkeiten. Eine davon ist die CSS-Eigenschaft 'vertical-align'. Damit lassen sich die Texte senkrecht ausrichten.
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.
Viele Grüße
rzscout
Hi black79,
leider sind mir in deinem Code mehrere Problemstellen aufgefallen. Du verwendest den HTML-Tag 'font'. Dieser ist nicht mehr HTML5 Standard. Verwende hier lieber den HTML-Tag 'p' für Absatz. Du verwendest sehr häufig Inline-Styles. Hier solltest du das CSS auslagern. Verwende hier Klassen statt Inline-Styles. Vermeide die Verwendung von jQuery und auch Bootstrap. Sowohl CSS als auch Javascript bieten von Haus aus genug Eigenschaften und Methoden um auf externe Frameworks und Bibliotheken zu verzichten. Größenangaben von Tabellenelementen solltest mithilfe von CSS machen. Da Attribute wie width und height überflüssig sind. Es reicht wenn du den Initialspalten/Tabellen-Head eine feste Größe vorgibst und dies bitte mit CSS. Less und Sass haben ein paar Vorteile aber auch einige Nachteile: Hier würde ich dir empfehlen reines CSS zu verwenden.
Das sind alles nur Empfehlungen um deinen Code zu optimieren. Du musst nicht unbedingt das umsetzen, aber es wäre vom Vorteil für dich. Damit lassen sich Performance, Übersichtlichkeit des Codes und vieles weiteres verbessern.
Viele Grüße
rzscout
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen"
Für die Textausrichtung innerhalb eines Tabellenelements gibt auch mehrere Möglichkeiten. Eine davon ist die CSS-Eigenschaft 'vertical-align'. Damit lassen sich die Texte senkrecht ausrichten.
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.
Viele Grüße
rzscout
Hi black79,
leider sind mir in deinem Code mehrere Problemstellen aufgefallen. Du verwendest den HTML-Tag 'font'. Dieser ist nicht mehr HTML5 Standard. Verwende hier lieber den HTML-Tag 'p' für Absatz. Du verwendest sehr häufig Inline-Styles. Hier solltest du das CSS auslagern. Verwende hier Klassen statt Inline-Styles. Vermeide die Verwendung von jQuery und auch Bootstrap. Sowohl CSS als auch Javascript bieten von Haus aus genug Eigenschaften und Methoden um auf externe Frameworks und Bibliotheken zu verzichten. Größenangaben von Tabellenelementen solltest mithilfe von CSS machen. Da Attribute wie width und height überflüssig sind. Es reicht wenn du den Initialspalten/Tabellen-Head eine feste Größe vorgibst und dies bitte mit CSS. Less und Sass haben ein paar Vorteile aber auch einige Nachteile: Hier würde ich dir empfehlen reines CSS zu verwenden.
Das sind alles nur Empfehlungen um deinen Code zu optimieren. Du musst nicht unbedingt das umsetzen, aber es wäre vom Vorteil für dich. Damit lassen sich Performance, Übersichtlichkeit des Codes und vieles weiteres verbessern.
Viele Grüße
rzscout
Ja :-) dass mit den Klassen wollte ich schon längst umgesetzt haben!
ist jQuery nicht eine Bibliothek von JavaScript?
Ist aber auch egal, werde es rausnehmen! Möchte ja was lernen
Hi black79,
ja jQuery ist eine Javascript-Bibliothek. jQuery war auch mal sehr gut. Als es noch große Probleme gab durch die fehlende Kompatibilität zwischen den Browsern war jQuery eine gute Lösung und hat viele Vorteile mit sich gebracht. Nun haben sich die Browser weiter entwickelt so auch HTML, CSS und Javascript. Sodass vieles aus jQuery überholt ist und durch reines Javascript möglich ist. So wie die Selektion von Elementen mithilfe von CSS durch die Javascript-Methode 'querySelector' und 'querySelectorAll'.
Reines Javascript heutzutage viel mehr Möglichkeiten als es vor ein paar Jahren so war. Seit 2012/2013 sind viele Funktionen und Eigenschaften in der Syntax von JS verbessert worden. Ich sehe da viel Potenzial so gut wie möglich auf Frameworks und Bibliotheken in JS zu verzichten. Das kann auch zu einem positiven Nebeneffekt führen wie bessere Performance und weniger Traffic.
Am Ende ist es immer noch eine Empfehlung von mir die man umsetzen kann oder auch nicht. Du entscheidest letzendlich wie dein Projekt aufgebaut ist.
PS: Die Idee zu deinem Projekt find ich cool , weiter so ;-)
Viele Grüße
rzscout
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen"
Für die Textausrichtung innerhalb eines Tabellenelements gibt auch mehrere Möglichkeiten. Eine davon ist die CSS-Eigenschaft 'vertical-align'. Damit lassen sich die Texte senkrecht ausrichten.
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.
Viele Grüße
rzscout
Hi black79,
leider sind mir in deinem Code mehrere Problemstellen aufgefallen. Du verwendest den HTML-Tag 'font'. Dieser ist nicht mehr HTML5 Standard. Verwende hier lieber den HTML-Tag 'p' für Absatz. Du verwendest sehr häufig Inline-Styles. Hier solltest du das CSS auslagern. Verwende hier Klassen statt Inline-Styles. Vermeide die Verwendung von jQuery und auch Bootstrap. Sowohl CSS als auch Javascript bieten von Haus aus genug Eigenschaften und Methoden um auf externe Frameworks und Bibliotheken zu verzichten. Größenangaben von Tabellenelementen solltest mithilfe von CSS machen. Da Attribute wie width und height überflüssig sind. Es reicht wenn du den Initialspalten/Tabellen-Head eine feste Größe vorgibst und dies bitte mit CSS. Less und Sass haben ein paar Vorteile aber auch einige Nachteile: Hier würde ich dir empfehlen reines CSS zu verwenden.
Das sind alles nur Empfehlungen um deinen Code zu optimieren. Du musst nicht unbedingt das umsetzen, aber es wäre vom Vorteil für dich. Damit lassen sich Performance, Übersichtlichkeit des Codes und vieles weiteres verbessern.
Viele Grüße
rzscout
Guten Morgen,
ich weiß das Du mir helfen willst, und wenn es zeitlich passt mir eine Vorlage zum Verstädnis basteln möchtest.
Ich habe vorab zum Verstädnis noch eine Frage zu JavaScript.
Wenn man ein Element mit Javascript erzeugt hat, wie erstelle ich dann eine Klasse zu dem erzeugten Element?
Code:
//Zustaendigkeit
field = document.createElement('td');
font = document.createElement('p');
zustaendigkeit = elem.getElementsByTagName('zustaendigkeit')[0].firstChild.nodeValue;
font.innerHTML = zustaendigkeit;
field.appendChild(font);
field.setAttribute('width', 26);
line.appendChild(field);
Für die Textausrichtung innerhalb eines Tabellenelements gibt auch mehrere Möglichkeiten. Eine davon ist die CSS-Eigenschaft 'vertical-align'. Damit lassen sich die Texte senkrecht ausrichten.
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.
Viele Grüße
rzscout
Hi black79,
leider sind mir in deinem Code mehrere Problemstellen aufgefallen. Du verwendest den HTML-Tag 'font'. Dieser ist nicht mehr HTML5 Standard. Verwende hier lieber den HTML-Tag 'p' für Absatz. Du verwendest sehr häufig Inline-Styles. Hier solltest du das CSS auslagern. Verwende hier Klassen statt Inline-Styles. Vermeide die Verwendung von jQuery und auch Bootstrap. Sowohl CSS als auch Javascript bieten von Haus aus genug Eigenschaften und Methoden um auf externe Frameworks und Bibliotheken zu verzichten. Größenangaben von Tabellenelementen solltest mithilfe von CSS machen. Da Attribute wie width und height überflüssig sind. Es reicht wenn du den Initialspalten/Tabellen-Head eine feste Größe vorgibst und dies bitte mit CSS. Less und Sass haben ein paar Vorteile aber auch einige Nachteile: Hier würde ich dir empfehlen reines CSS zu verwenden.
Das sind alles nur Empfehlungen um deinen Code zu optimieren. Du musst nicht unbedingt das umsetzen, aber es wäre vom Vorteil für dich. Damit lassen sich Performance, Übersichtlichkeit des Codes und vieles weiteres verbessern.
Viele Grüße
rzscout
Guten Morgen,
ich weiß das Du mir helfen willst, und wenn es zeitlich passt mir eine Vorlage zum Verstädnis basteln möchtest.
Ich habe vorab zum Verstädnis noch eine Frage zu JavaScript.
Wenn man ein Element mit Javascript erzeugt hat, wie erstelle ich dann eine Klasse zu dem erzeugten Element?
Code:
//Zustaendigkeit
field = document.createElement('td');
font = document.createElement('p');
zustaendigkeit = elem.getElementsByTagName('zustaendigkeit')[0].firstChild.nodeValue;
font.innerHTML = zustaendigkeit;
field.appendChild(font);
field.setAttribute('width', 26);
line.appendChild(field);
Klassen fügst du wie bei bestehenden Elementen hinzu über 'classList.add('meinKlassenName')'. Bitte kein setAttribute, dafür verwenden, da Werte überschrieben werden könnten und es sauberer ist die Native Methode mit der 'classList' zu verwenden.
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen"
