tag:forum.selfhtml.org,2005:/selfTabellen-Zellen mit Data-Status – SELFHTML-Forum2019-03-24T19:42:45Zhttps://forum.selfhtml.org/self/2019/mar/24/tabellen-zellen-mit-data-status/1745201#m1745201Liar2019-03-24T09:09:14Z2019-03-24T09:09:14ZTabellen-Zellen mit Data-Status<p>Hallo,</p>
<p>ist es möglich mit jQuery, da ich dieses bereits in meinem Projekt einsetze Tabellen-Zellen ein oder auszublenden je nachdem welches Checkboxen angeklickt sind?</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span> <span class="token attr-name">data-status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><?php echo htmlspecialchars($array['status']); ?><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token prolog"><?php echo htmlspecialchars($array['name']); ?></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token prolog"><?php echo htmlspecialchars($array['vorname']); ?></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
</code></pre>
<p>Für die Auswahl dachte ich an folgenden Aufbau, ich bin mir allerdings nicht sicher ob ich überhaupt ein <form> benötige?</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Welche Einträge wollen Sie sehen? <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>status[]<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> Aktive<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>status[]<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> Gesperrte<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>Schön wäre es wenn sich das System merkt welche Auswahl ich mir eingestellt habe.<br>
Ich dachte hier an folgendes</strong></p>
<ol>
<li>User trifft die Auswahl und es werden erst einmal die Einträge ausgeblendet</li>
<li>Es wird ein Wert in die Datenbank geschrieben um beim nächsten Aufruf nur die Werte angezeigt die ausgewählt sind. Jetzt stellt sich mir hier Frage wie kann ich die Werte direkt in die Datenbank schreiben ohne die Seite neu laden zu müssen? OK, hier merke ich mein Vorhaben kann nicht funktionieren denn wie lade ich dann die Einträge die derzeit nicht ausgelesen werden wenn ich mich für etwas anderes entscheide? Dieses müsste irgendwie dynamisch ausgelesen werden?</li>
<li>Es gäbe auch die Möglichkeit immer alles auszulesen und einfach nur zu verstecken, was bei vielen Einträge allerdings unnötig ist.</li>
</ol>
<p>Wie würdet ihr vorgehen bzw. dieses umsetzen?</p>
https://forum.selfhtml.org/self/2019/mar/24/tabellen-zellen-mit-data-status/1745223#m1745223Felix Riestererhttps://felix-riesterer.de2019-03-24T10:43:35Z2019-03-24T10:43:35ZTabellen-Zellen mit Data-Status<p>Liebe(r) Liar,</p>
<blockquote>
<p>ist es möglich mit jQuery, da ich dieses bereits in meinem Projekt einsetze Tabellen-Zellen ein oder auszublenden je nachdem welches Checkboxen angeklickt sind?</p>
</blockquote>
<p>ja. Du <a href="http://api.jquery.com/toggleClass/" rel="nofollow noopener noreferrer">togglest einen Klassennamen</a>. Dein CSS sorgt dann für <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/visibility" rel="nofollow noopener noreferrer">die Darstellung solcher Art bezeichneter Elemente</a>.</p>
<blockquote>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span> <span class="token attr-name">data-status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><?php echo htmlspecialchars($array['status']); ?><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token prolog"><?php echo htmlspecialchars($array['name']); ?></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token prolog"><?php echo htmlspecialchars($array['vorname']); ?></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
</code></pre>
</blockquote>
<p>Was genau tut das <code>data-status</code>? Soll es die ganze Zeile ausblenden? Du kannst anstelle des toggleClass auch den Inhalt des <code>data-status</code>-Wertes benutzen. <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Attributselektor/Wert" rel="nofollow noopener noreferrer">Passende Selektoren</a> gibt es ja.</p>
<blockquote>
<p>Für die Auswahl dachte ich an folgenden Aufbau, ich bin mir allerdings nicht sicher ob ich überhaupt ein <form> benötige?</p>
</blockquote>
<p>Wenn Du die Seite ohne JavaScript nicht benutzen können musst, kannst Du alles über AJAX-Techniken machen und auf ein <code><form></code> verzichten, ja.</p>
<blockquote>
<p><strong>Schön wäre es wenn sich das System merkt welche Auswahl ich mir eingestellt habe.</strong></p>
</blockquote>
<p>Soll diese Einstellung auf dem Server oder im Client gespeichert werden? Wenn Du mit JavaScript hantierst, gäbe es ja <a href="https://wiki.selfhtml.org/wiki/JavaScript/Web_Storage#localStorage" rel="nofollow noopener noreferrer"><code>localStorage</code></a>.</p>
<blockquote>
<p><strong>Ich dachte hier an folgendes</strong></p>
<ol>
<li>User trifft die Auswahl und es werden erst einmal die Einträge ausgeblendet</li>
</ol>
</blockquote>
<p>Das tust Du mit JavaScript. OK.</p>
<blockquote>
<ol start="2">
<li>Es wird ein Wert in die Datenbank geschrieben</li>
</ol>
</blockquote>
<p>Du <a href="http://api.jquery.com/jQuery.post/" rel="nofollow noopener noreferrer">POSTest also etwas via AJAX im Hintergrund</a> an die DB, die sich diese Einstellung merkt. OK.</p>
<blockquote>
<p>um beim nächsten Aufruf nur die Werte angezeigt die ausgewählt sind.</p>
</blockquote>
<p>Du meinst, wenn die Seite neu geladen wird? Da käme dann der gespeicherte Einstellungen-Wert ins Spiel, ja.</p>
<blockquote>
<p>Jetzt stellt sich mir hier Frage wie kann ich die Werte direkt in die Datenbank schreiben ohne die Seite neu laden zu müssen?</p>
</blockquote>
<p>Siehe AJAX-Techniken. Dein jQuery vereinfacht die Nutzung dieser in seinen spezialisierten Methoden.</p>
<blockquote>
<p>OK, hier merke ich mein Vorhaben kann nicht funktionieren denn wie lade ich dann die Einträge die derzeit nicht ausgelesen werden wenn ich mich für etwas anderes entscheide? Dieses müsste irgendwie dynamisch ausgelesen werden?</p>
</blockquote>
<p>Auch dafür kann man AJAX-Techniken benutzen. Ob das aber sinnvoll ist, bleibt eine Frage.</p>
<blockquote>
<ol start="3">
<li>Es gäbe auch die Möglichkeit immer alles auszulesen und einfach nur zu verstecken, was bei vielen Einträge allerdings unnötig ist.</li>
</ol>
</blockquote>
<p>Mag unnötig sein, ist aber flexibler in der Benutzerführung. Auch wenn der Benutzer eine bestimmte Einstellung vorgenommen hat, werden die ausgeblendeten Daten trotzdem ausgeliefert, damit er sich diese bei Bedarf auch anzeigen lassen kann. Die Klassen oder Attributwerte, Die Dein jQuery anhand der Checkboxen ändert, kann ja das serverseitige Script ebenso vorbereiten.</p>
<p>Liebe Grüße,</p>
<p>Felix Riesterer.</p>
https://forum.selfhtml.org/self/2019/mar/24/tabellen-zellen-mit-data-status/1745227#m1745227Felix Riestererhttps://felix-riesterer.de2019-03-24T11:07:34Z2019-03-24T11:07:34ZTabellen-Zellen mit Data-Status<p>Liebe(r) Liar,</p>
<p>ich habe gerade noch einmal über deinen Code geschaut:</p>
<blockquote>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span> <span class="token attr-name">data-status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><?php echo htmlspecialchars($array['status']); ?><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token prolog"><?php echo htmlspecialchars($array['name']); ?></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token prolog"><?php echo htmlspecialchars($array['vorname']); ?></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
</code></pre>
</blockquote>
<p>anders als in Deinem Threadtitel notiert tragen nicht Deine Tabellen<em>zellen</em> das <code>data-status</code>-Attribut, sondern Deine Tabellen<em>zeilen</em>! Das ist ein wesentlicher Unterschied.</p>
<p>Liebe Grüße,</p>
<p>Felix Riesterer.</p>
https://forum.selfhtml.org/self/2019/mar/24/tabellen-zellen-mit-data-status/1745228#m1745228Liar2019-03-24T11:10:03Z2019-03-24T11:10:03ZTabellen-Zellen mit Data-Status<p>Hallo,</p>
<p>ich meinte auch Tabellenzeilen. Hab mich verschrieben. Danke auch für deine Ausführliche Erklärung. Stellt sich doch schwieriger da als angenommen. Ich werde es wohl mit PHP und einem Seiten-Reload machen.</p>
<p>Kann ein wenig jQuery mehr aber nicht und etwas fertiges habe ich im Netz nach 4 Stunden suchen leider nicht gefunden.</p>
<p>Wäre zwar etwas schönes aber man kann ja nicht alles haben ;)</p>
https://forum.selfhtml.org/self/2019/mar/24/tabellen-zellen-mit-data-status/1745310#m1745310MudGuardhttp://www.andreas-waechter.de/2019-03-24T19:42:45Z2019-03-24T19:42:45ZTabellen-Zellen mit Data-Status<p>Hi,</p>
<blockquote>
<p>anders als in Deinem Threadtitel notiert tragen nicht Deine Tabellen<em>zellen</em> das <code>data-status</code>-Attribut, sondern Deine Tabellen<em>zeilen</em>!</p>
</blockquote>
<p>Was erwartest Du denn von einem Lügner? </p>
<p>cu,<br>
Andreas a/k/a MudGuard</p>
https://forum.selfhtml.org/self/2019/mar/24/tabellen-zellen-mit-data-status/1745288#m1745288Felix Riestererhttps://felix-riesterer.de2019-03-24T18:50:51Z2019-03-24T18:50:51ZTabellen-Zellen mit Data-Status<p>Liebe(r) Liar,</p>
<blockquote>
<p>Kann ein wenig jQuery mehr aber nicht</p>
</blockquote>
<p>Du könntest aber lernen, wie man so etwas macht. Links zur API habe ich Dir ja schon gegeben. Für Detailnachfragen bist Du hier richtig.</p>
<blockquote>
<p>und etwas fertiges habe ich im Netz nach 4 Stunden suchen leider nicht gefunden.</p>
</blockquote>
<p>Ja, das gibt es hier auch nicht. Aber Hilfe beim Selberlernen.</p>
<p>Liebe Grüße,</p>
<p>Felix Riesterer.</p>