JavaScript JS/HTML: Verschiedene Tabellen in Auswahlliste einfügen ?

[Motrip90]

Hallo Leute,

Problemfall: ich habe mehrere Tabellen (z.B. Stundenpläne) und ich will das in ein Auswahlliste packen.
D.h. Man kann dann bei Auswahlliste wählen zwischen Klasse 5-6-7-8 und wenn man z.B. Klasse 5 auswählt soll dann der Stundenplan von Klasse 5 angezeigt werden.

Ich hätte gedacht das per JS zu machen, leider ohne Erfolg .

hat einer Vorschläge?

 

[Ciraxis]

die unschönste art und weise ist das ganze komplett bei seitenaufruf zu laden. Also das du jeden stundenplan auf der seite hast. Dann in Abhängigkeit vom Select wird der richtige stundensatz angezeigt.

Schöner wäre es dynamischer zu machen. Stichwort ajax. Wenn du ganz hip bist dann nimmste noch eines der wöchentlichen vip js frameworks die rauskommen ;-)

Kannst du HTML oder JS? Oder wie sind deine Grundkenntnisse?

 

[Motrip90]

Student- Projektarbeit (Only 3 Credit Points), haben das Fach erst nächste Semester also meine Fähigkeiten liegen aktuell bei 15%

 

[sdwaroc]

Dann zeig doch mal bitte was du bisher hast. Die HTML-Struktur wäre durchaus sinnvoll.

Allgemein musst du die Auswahliste mit nem onclick-Listener versehen und eine passende Funktion aufrufen, die, basierend auf dem jeweils ausgewählten Element, HTML-Elemente per CSS-display-Attribut einblendet oder ausblendet.

die unschönste art und weise ist das ganze komplett bei seitenaufruf zu laden. Also das du jeden stundenplan auf der seite hast. Dann in Abhängigkeit vom Select wird der richtige stundensatz angezeigt.

Das kommt ganz auf die Menge an Informationen an die im Stundenplan stehen. Wenn keine spezifischen Bilder sondern nur Texttabellen geladen werden müssen ist es nicht so dramatisch bspw. 7 Tage auf einmal zu laden.

 

[Motrip90]

Also was ich bisher habe:

3 Tabellen (ID 5 , 6, 7)



Eine Auswahlliste: soll die ID´s Anzeigen (5-6-7)

und wenn die 5 ausgewählt wird --> Dann Tabelle mit ID 5 zeigen.


JS habe ich noch nicht (Kaum kentnisse)

--> Falls eine einfachere Lösung existiert, gerne! es muss nur funktionieren

 

[sdwaroc]

Nein, es gibt keine einfachere Lösung. Du wirst dich für das Problem mit Javascript anfreunden müssen.

1. Deine Tabellen brauchen eine ID.
2. Deine Auswahlliste braucht einen onchange-Listener.
3. Die vom onchange-Listener aufgerufene Funktion muss die via ID einem Feld der Auswahlliste zugewiesene Tabelle einblenden und alle anderen ausblenden. (CSS-Attribute display)

Das ist kein Kunstgriff und nicht schwer umzusetzen. Du musst dich wohl mit getElementByID(), setAttribute() und ein paar anderen Funktionen auseinandersetzen.

Wenn du einen erste version des Codes hast kannst du den gerne Posten wenn es Probleme gibt. Dann bitte aber auch den HTML-Code mit den entsprechenden IDs der Elemente usw. mit angeben.

 

[Motrip90]

ok danke! ich werde es versuchen und ggf. nochmal hier melden

bzw. ist das mit Buttons einfacher (das am anfang 3 Buttons kommen und wenn man eins mit onclick methode drückt, dann kommt tabelle)?

 

[sdwaroc]

Mit Buttons könntest du Gebraucht von CSS-Pseudoklassen machen. Das wird aber mit großer Warscheinlichkeit auch recht umständlich. So müsste die Tabelle in der HTML-Dokumentstruktur auf gleicher Ebene mit den Button oder eben Kind des Buttons sein. Sobald du das Element mit den :hover-Selektor mit der Maus verlässt verschwindet auch die Tabelle wieder.

Für Elemente auf gleicher Ebene:

input[type=button]:hover + table {
  display: block;
}

Für eine Tabelle als Kindelement des Buttons:

input[type=button]:hover > table {
  display: block;
}

bzw. ist das mit Buttons einfacher (das am anfang 3 Buttons kommen und wenn man eins mit onclick methode drückt, dann kommt tabelle)?

Nein, für Javascript ist der Unterschied zwischen Buttons und Dropdowns zu vernachlässigen. Das unterscheidet sich letztendlich nur an wenigen Stellen im Code. Für ein Dropdown-Menü musst du das Element mit dem "selected"-Attribut auswählen um das aktuell ausgewählte zu erhalten. Wenn du das mit Buttons lösen wolltest böte sich eine Funktion an die jeweils die ID der anzusprechenden Tabelle als Funktionsparameter nimmt. Jeder Button ruft per onclick dann diese Funktion mit jeweils spezifischer ID auf.

 

[Motrip90]

Hab das so gelöst:

Bootrap Vorlage überarbeitet jetzt muss ich nur noch die Tabellen in die richtigen Stellen einfügen

http://bootsnipp.com/snippets/featured/people-card-with-tabs

<div class="col-lg-6 col-sm-6">
    <div class="card hovercard">
        
    <div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
        <div class="btn-group" role="group">
            <button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                <div class="hidden-xs">5. Klasse</div>
            </button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                <div class="hidden-xs">6. Klasse</div>
            </button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                <div class="hidden-xs">7. Klasse</div>
            </button>
        </div>
    
            <div class="btn-group" role="group">
            <button type="button" id="following" class="btn btn-default" href="#tab4" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                <div class="hidden-xs">8. Klasse</div>
            </button>
        </div>
    
        <div class="btn-group" role="group">
            <button type="button" id="following" class="btn btn-default" href="#tab5" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                <div class="hidden-xs">9. Klasse</div>
            </button>
        </div>
    
            <div class="btn-group" role="group">
            <button type="button" id="following" class="btn btn-default" href="#tab6" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                <div class="hidden-xs">10. Klasse</div>
            </button>
        </div>
    </div>
        <div class="well">
      <div class="tab-content">
        <div class="tab-pane fade in active" id="tab1">
          <h3>This is tab 1</h3>
        </div>
        <div class="tab-pane fade in" id="tab2">
          <h3>This is tab 2</h3>
        </div>
        <div class="tab-pane fade in" id="tab3">
          <h3>This is tab 3</h3>
        </div>
            <div class="tab-pane fade in" id="tab3">
          <h3>This is tab 4</h3>
        </div>
            <div class="tab-pane fade in" id="tab3">
          <h3>This is tab 5</h3>
        </div>
            <div class="tab-pane fade in" id="tab3">
          <h3>This is tab 6</h3>
        </div>
      </div>
    </div>
    
    </div>

 

[sdwaroc]

Naja wenn du das einfacher/übersichtlicher als eine selbstgeschriebene Javascript-Funktion findest und es das gewünschte tut, adäquate Lösung.