html-Struktur gefragt

[Baba]

Einen schönen Wochenstart allen,

ich benötige einen Ansatz für den html-Aufbau eines Buchungskalenders.

Ich erstelle eine Tabelle, bei der in der ersten Spalte "Shops" aufgeführt sind und in der zweiten Spalte ein Kalender (Tage, zu Wochen aggregiert), wobei jeder Shop einen eigenen Kalender hat. Sagen wir mal stets fünf Wochen == 35d.

Woche 15 | Woche 16
Shop A   --x-xxx | --x-xx-
Shop B   xxxxxxx | xxx-xx-
Shop C   --x---- | ----xx-

Die Wochen sind per Javascript weiterschaltbar. Zu den Tagen gibt es Statusinformationen, die aus einer DB gerufen werden. Durch das Weiterschalten bedingt, wird AJAX verwendet, da sonst unendlich viele Informationen zum Klienten gesendet werden müssten.
Ich suche jetzt nach einem geeigneten html-Aufbau.

Wenn ich eine Woche weiterschalte, sollen die Shops stehenbleiben wie sie sind. Daher fällt mir momentan nur ein, nicht mit einer Tabelle zu arbeiten sondern mit divs.

  
<div class='shops'>  
  <div>ShopA</div>  
  <div>ShopB</div>  
  <div>ShopC</div>  
  <div>ShopD</div>  
  <div>ShopE</div>  
  <div>ShopF</div>  
</div>  
  
<div class='bookings'>  
  <div>... Kalender ...</div>  
</div>

Das alles mit ziemlich viel gefloate und immer darauf achten, dass die Bookings die gleiche Höhe haben, wie die Shops. Semantisch wäre eigentlich sowas schöner:

<table>  
  <tr>  
    <td>ShopA</td>  
    <td>...KalenderA...  
  </tr>  
  <tr>  
    <td>ShopB</td>  
    <td>...KalenderB...  
  </tr>  
  <tr>  
    <td>ShopC</td>  
    <td>...KalenderC...  
  </tr>  
  <tr>  
    <td>ShopD</td>  
    <td>...KalenderD...  
  </tr>  
</table>

Doch so kommen die Kalender-Daten nicht aus dem Callback vom AJAX-Request. Ich könnte auch für jede einzelne Zeile einen eigenen AJAX-Request erstellen und dann für ein "Wochenvorblättern" alle Zeilen veranlassen zu blättern. Aber das finde ich kompliziert.

Was würdet Ihr vorschlagen, wie sich das am simpelsten lösen lässt, was das html angeht.

Cheers,
Baba

[ichbinich]

Hallo,

Die Wochen sind per Javascript weiterschaltbar.

Ich verstehe das jetzt mal so, dass der erste raus fällt und alle anderen verschieben sich nach links, bzw. auch umgekehrt.

Doch so kommen die Kalender-Daten nicht aus dem Callback vom AJAX-Request.

Wieso solltest du bei Verwenden einer Tabelle keine Daten aus dem Callback bekommen?

Ich würde es als Tabelle machen. Beim Verschieben nach links bspw. in allen Zeilen die 2.Spalte löschen und am Ende jeweils die neue Spalte einfügen.

vg ichbinich

[Baba]

Die Wochen sind per Javascript weiterschaltbar.
Ich verstehe das jetzt mal so, dass der erste raus fällt und alle anderen verschieben sich nach links, bzw. auch umgekehrt.

Richtig. Dieses Beispiel geht in die Richtung (aber: vorangestellte Shop-Spalte und Wochen, statt Monate).

Doch so kommen die Kalender-Daten nicht aus dem Callback vom AJAX-Request.
Wieso solltest du bei Verwenden einer Tabelle keine Daten aus dem Callback bekommen?

Ich meine, ich bekomme die Daten per Zeile. Und nicht etwa "den rechten Teil der Tabelle". Die Reihenfolge ist eben tr->td und nicht td->tr. Unten erkläre ich nochmal, was ich meine.

Ich würde es als Tabelle machen. Beim Verschieben nach links bspw. in allen Zeilen die 2.Spalte löschen und am Ende jeweils die neue Spalte einfügen.

Danke für den Hinweis. Ich sehe nun aber doch noch ein Problem. Sagen wir mal, ich möchte aus obigem Beispiel auch übernehmen:
a) animierter Wochenübergang
b) Selektierung von x-Tagen über Wochenwechsel hinaus (!)
Die Animation kann ich doch so gar nicht machen, wenn ich mehrere Spalten für die Wochen habe?!? Wie gesagt, linke Spalte sollte stehenbleiben. Und zu b). Ich glaube ich benötige die Tage im DOM wirklich benachbart, auch über Wochen hinaus, damit ich es so selektieren kann (bei mouseover, wie im Beispiel über Monate hinweg).

Ich benötige keine Fertiglösung. Ich freue mich über Denkansätze.

Momentan favorisiere ich

<table>  
  <tr>  
    <td>ShopA</td>  
    <td>...5 - Wochen - KalenderA...</td>  
  </tr>  
  <tr>  
    <td>ShopB</td>  
    <td>...5  - Wochen - KalenderB...</td>  
  </tr>  
</table>

...um dann beim Weiterschalten zur nächsten Woche: 7 neue Tage rechts hinzufügen, alle Kalender nach links rausrutschen zu lassen, 7 Tage links aus dem Dom nehme.

Vorteil Tabell:

• Shops und Kalender sicher auf einer Höhe halten.
  Nachteil Tabelle:
• n-Shops Einzelanimationen bei Wochenwechsel synchronisieren
• n-Shops Daten aus AJAX-Callback in Tabelle frickeln

Wenn der Kalenderblock im DOM allerdings eins wäre (wie im Beispiel mit den DIVS) hätte ich es javascript- und AJAX-mäßig leichter.

Was würdet ihr tun? Lieben Dank.

Cheers,
Baba

[ichbinich]

Hallo,

Ich meine, ich bekomme die Daten per Zeile. Und nicht etwa "den rechten Teil der Tabelle". Die Reihenfolge ist eben tr->td und nicht td->tr. Unten erkläre ich nochmal, was ich meine.

Das ist doch aber kein Grund dafür die Daten nicht in eine Tabelle zu bekommen.

a) animierter Wochenübergang

Würde ich wie folgt machen (am Beispiel von jQuery): Zuerst die neue Spalte ans Ende der <tr> einfügen. Per umliegendem div mit entsprechendem overflow verhindern, dass sie jetzt bereits zu sehen ist. Dann per $('#tabelle tr td:eq(2)') die 2.Spalte animieren (Breite bis auf 0 verringern) und dann aus dem DOM entfernen.

b) Selektierung von x-Tagen über Wochenwechsel hinaus (!)

Ungetestet (Tage befinden sich bspw. innerhalb einer <td> in <span>):

$('#tabelle span').hover(function() {
var idx = $('#tabelle span').index(this);
$('#tabelle span:eq(' + idx + '), #tabelle span:eq(' + (idx+1) + '), #tabelle span:eq(' + (idx+2) + '), #tabelle span:eq(' + (idx+3) + ')').css('text-decoration','underline');
}, function() {
var idx = $('#tabelle span').index(this);
$('#tabelle span:eq(' + idx + '), #tabelle span:eq(' + (idx+1) + '), #tabelle span:eq(' + (idx+2) + '), #tabelle span:eq(' + (idx+3) + ')').css('text-decoration','none');
}
);

vg ichbinich

[Baba]

Hey,
dank Deiner Hilfe habe ich es geschafft. Es war sehr gut, nochmal zu hören, dass das nicht schwer ist :) Ich kannte einfach die richtigen jquery Tricks noch nicht.
Danke auch für den genialen Codeblock zum Selektieren. Ich habe ihn noch nicht getestet, aber bin sicher, dass ich es schaffen werde.

Cheers,
Baba

[Baba]

Würde ich wie folgt machen (am Beispiel von jQuery): Zuerst die neue Spalte ans Ende der <tr> einfügen. Per umliegendem div mit entsprechendem overflow verhindern, dass sie jetzt bereits zu sehen ist. Dann per $('#tabelle tr td:eq(2)') die 2.Spalte animieren (Breite bis auf 0 verringern) und dann aus dem DOM entfernen.

Das geht nicht. :eq selektiert mir nur die zweite Zelle in der ersten Zeile. Weißt Du wie es geht, oder rätst du? wenn ich nth-child nehme wird bei animate({widht:0},500) außerdem nur bis zum Inhalt von der td verringert. Auch, wenn die Zelle ein Overflow hidden hat.

Cheers,
Baba

[ichbinich]

Hallo,

Das geht nicht. :eq selektiert mir nur die zweite Zelle in der ersten Zeile. Weißt Du wie es geht, oder rätst du?

Das war ungeprüft und geht tatsächlich nicht. :nth-child musst du nehmen.

wenn ich nth-child nehme wird bei animate({widht:0},500) außerdem nur bis zum Inhalt von der td verringert. Auch, wenn die Zelle ein Overflow hidden hat.

das liegt nicht an nth-child, ich habs nur mit css auch nicht hinbekommen die Zelle kleiner zu machen.

Was geht, ist den Inhalt der Zelle zu löschen:

$('#tabelle tr td:nth-child(2)')
  .html('')
  .animate({
    width:'0px',
  },500, function() {
    $(this).remove();
  });

vg ichbinich

[Matthias Apsel]

Om nah hoo pez nyeetz, Baba!

Wenn der Kalenderblock im DOM allerdings eins wäre (wie im Beispiel mit den DIVS) hätte ich es javascript- und AJAX-mäßig leichter.

Dann nimm doch einfach div-Elemente und verwende display: table-*

BTW: Das verlinkte Beispiel ist fehlerhaft (monatsübergreifend zu kopieren, geht zumindest im IE8 nicht. Allerdings ist der 3. Mai auch durchgestrichen, ebenso wie der 3. April und ich weiß nicht warum. Eine monatsübergreifende Markierung endet immer beim 2. Mai)

Matthias

[Baba]

Dann nimm doch einfach div-Elemente und verwende display: table-*

Habe mal kurz reingeschaut. Ich kriege es allerdings nicht hin, eine "Tabelle" mit div zu realisieren, bei der die Tabelle durch spalten aufgespannt wird, welche mit td's zeilenweise zu füllen wäre. Das Folgende hält mir die Zeilenhöhen nicht konsistent:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
<html><head><title>display</title>  
<style type="text/css">  
div.table { display:table; border-collapse:collapse; }  
div.tr { display:table-row; }  
div.td { display:table-cell; border:thin solid red; padding:5px; }  
</style>  
</head><body>  
  
<div class="table">  
 <div class="td">  
  <div class="tr">Shop A</div>  
  <div class="tr">Shop B <br>ist etwas länger geworden</div>  
  <div class="tr">Shop C</div>  
  <div class="tr">Shop D</div>  
 </div>  
 <div class="td">  
  <div class="tr">o x x o o x x</div>  
  <div class="tr">x o x o o x o</div>  
  <div class="tr">x x x o o x x</div>  
  <div class="tr">o x o o o x o</div>  
 </div>  
</div>  
  
</body></html>

BTW: Das verlinkte Beispiel ist fehlerhaft (monatsübergreifend zu kopieren, geht zumindest im IE8 nicht. Allerdings ist der 3. Mai auch durchgestrichen, ebenso wie der 3. April und ich weiß nicht warum. Eine monatsübergreifende Markierung endet immer beim 2. Mai)

"Montsübergreifend kopieren" verstehe ich nicht. Es ist jedenfalls nicht vorgesehen, etwas zu kopieren. Links ist ein Beispiel mit 2 Monaten und rechts ein Beispiel mit einem Monat.
Sorry, ich hätte die Hauptseite mit verlinken können. Ist von 2008.
Der 3. jedes Monats ist durchgestrichen um das Deaktivieren von Tagen direkt oder allgemein zu demonstrieren (hier direkt der 8/7/2008 und allgemein jeder 3. des Monats).

Das Beispiel entspricht nicht meinem Anwendungsfall, da ich einen Wochen-Kalender für jeden Shop entwerfen möchte, bei dem die Tag in einer Linie dargestellt werden.

Cheers,
Baba

[Matthias Apsel]

Om nah hoo pez nyeetz, Baba!

Schneller Blick: Kann es sein, dass du td und tr verwechselst?

Matthias

[Baba]

Es ging mir ja gerade darum, die  Tabelle anders herum zu definieren. Zunächst Spalten und dann Zeilen. Sonst könnte ich ja auch eine Tabelle nehmen. Ich habe eine statische Spalte und fünf dynamische. Wenn ich eine Spalte austauschen möchte, wäre es so herum einfacher. Mittlerweile habe ich jedoch durch die Unterstützung gelernt, dass das "Gefrickel", die Daten in die Zeilen zu bekommen, gar nicht so kompliziert ist.

Der Ansatz mit den divs wäre also nur besser, wenn ich die Hierarchi von td und tr umdrehen könnte.

Cheers,
Baba