Wie bekomme ich dieses Design hin?
Hey,
ich bin langsam am verzweifeln...
Ich frage mich die ganze Zeit wie ich das in CSS mithilfe von HTML und JS hinbekomme. (siehe Bild) Ich will das wenn man auf "Fach hinzufügen" klickt(grün), eine horizontale Linie entsteht und wenn man auf "Kategorie hinzufügen" klickt, eine vertikale linie. Auf die dabei entstehenden Felder sollte ich auch zugriff haben. Außerdem sollte es auch dynamisch sein. Wie bekomme ich das hin ?
2 Antworten
Ok, also das Design ist das klar eine Tabelle und die lässt sich mittels CSS problemlos gestalten. Da findest du sicherlich genügend Anleitungen und Beispiele im Netz.
Die Interaktivität ist da schon deutlich aufwändiger. Persönlich würde ich da eines der vielen reaktiven Frameworks nutzen, welche einem viel Arbeit annehmen. Ich selbst nutze für kleine bis mittlere Projekte gerne Alpine.js.
Hier habe ich dir mal ein ganz einfaches und rudimentäres Beispiel gemacht, wie das in Alpine.js aussehen könnte:
https://jsfiddle.net/Babelfisch/np9w86Lx/39/
Den Rest (also so ziemlich alles ;-) musst du natürlich selber machen aber so hast du schon mal einen Ansatz, wie das funktionieren kann.
Hier noch mal der Code:
<div x-data="{ data: [ { subject: 'Fach', categories: ['Kategorie', 'Kategorie'] }] }">
<div>
<button @click="data.push({ subject: 'neues Fach', categories: [...data[0].categories] })">Fach hinzufügen</button>
<button @click="data.forEach((row, index) => { row.categories.push('neue Kategorie') })">Kategorie hinzufügen</button>
</div>
<table>
<thead>
<tr>
<th>Fach</th>
<th :colspan="data[0].categories.length">Kategorie</th>
</tr>
</thead>
<tbody>
<template x-for="row in data">
<tr>
<td x-text="row.subject"></td>
<template x-for="cat in row.categories">
<td x-text="cat"></td>
</template>
</tr>
</template>
</tbody>
</table>
</div>
Das Tabellenlayout lässt sich mithilfe von <table>, <tr> und <td> im HTML simpel lösen. Der JavaScript-Code fügt lediglich neue Zeilen und Spalten ein. contentEditable ermöglicht das Bearbeiten des Zelleninhaltes, wodurch auch Breiten und Höhen automatisch angepasst werden.
Hier eine Lösung ohne Frameworks (Vanilla JavaScript): https://pastebin.com/fsv59ZQH