2 Probleme: Tabellenrahmen und Auswahlboxen

Computer: Software & Programmierung HTML & CSS
#1

Guten Morgen :smile:

Ich habe 2 Probleme in HTML:

1.) Ich habe eine Tabelle erstellt. Wenn man im -Tag das Attribut border auf „1“ setzt, bekommt die Tabelle natürlich einen Rahmen - oder besser gesagt eine komplette Rasterung. Ich möchte aber nicht, dass die border zwischen den ganzen Tabellenzellen zu sehen ist, sondern nur einen einzigen Rahmen um die Tabelle drum herum!
Gibt es für mein Problem vielleicht ein extra HTML-Tag (oder meinentwegen auch CSS-Tag), oder weiss jemand wie ich das anders erzwingen kann?

2.) Ich habe ein Formular erstellt. Darin sind an einer Stelle zwei Auswahlboxen (Selectboxen). Der Quelltext meiner ersten Selectbox sieht z.B. folgendermassen aus:

… Office-Paket
… Betriebssystem

Und je nachdem, was der User auswählt, sollen in der zweiten Selectbox die richtigen Auswahlmöglichkeiten dazu angezeigt werden; also wählt er z.B. das Office-Paket, sollen in der zweiten Selectbox Excel, Word usw. als Optionen stehen; wählt er aber Betriebssystem, sollen in der zweiten Selectbox Win98, WinNT usw. als Optionen stehen.
Hmmm, also um mein Problem zusammenzufassen: Kann man in HTML sozusagen zwischen zwei Selectboxen „vererben“?
[Wer nicht weiss was ich meine: eBay verwendet das z.B. auf dieser Seite: http://pages.ebay.de/help/basics/select-support.html
(allerdings benutzt eBay ein längeres JavaScript dafür).]

Es wäre schön wenn mir schnell jemand helfen kann, schonmal danke für die Antworten :smile:
mfG Tina

#2

Sorry, zu meinem 1. Problem habe ich gerade selber die Antwort gefunden und werde das nachher mal ausprobieren:
http://selfhtml.teamone.de/css/eigenschaften/rahmen.htm
Wenns nicht klappt belästige ich euch nochmal :wink:

Mein 2. Problem ist aber immer noch ungelöst… ich hoffe ihr wisst da was gegen :smile:

#3

2.) Ich habe ein Formular erstellt. Darin sind an einer Stelle
zwei Auswahlboxen (Selectboxen). Der Quelltext meiner ersten
Selectbox sieht z.B. folgendermassen aus:

dies sollte deine frage beantworten:
http://www.galileocomputing.de/openbook/javascript/j…

-)

Grusz

PK

#4

Hi,

zu 1:
In dem StyleSheet zeichnet er nur den Rhamen um die Tabelle.

zu 2:
Da hab ich jetzt nicht so schnell was parat, aber:
es gibt die Möglichkeit, per JavaScript StyleSheets zu ändern.
Du kannst bei der Ausfahl einer Option ein JavaScript aufrufen, dass einem Objekt neue StyleSheets zuweisen kann.
Ein Objekt (zB WassHierDrinnSteht ) der Größe 0px ist unsichtbar.
(in css: width: 0px; height: 0px:wink:
Die Funktion könnte dann ihm eine neue, gewünschte Größe zuweisen.
(in css: width: 150px; height: 50px; // etwa eine neue Selectbox der Größe 1)
Is nicht ganz trivial aber 'ne Möglichkeit für so dyamisches HTML.
EBay schreibt auf diese weise, die Halbe Seite neu.
Meine Möglichkeit wär etwas kürtzer aber um ein wenig JavaScript kommst du da nicht drum rum.

cu Desian

#5

Hallo,
ist ein wenig länger. Ich baus dir heute Abend mal zusammen, bitte warten.

Grüße
Stefan

#6

So, hier isses:

Im Ersten Teil kannst du deine Eintragungen machen und den Datenbaum aufbauen. Die einzelnen Einträge die Options ergeben sollen mußt du in geschweifte Klammern eintragen, der Rest sind eckige. die Struktur müßte eigentlich selbsterklärend sein (mail mich wenn nicht).
Die einzelnen SelectBoxen müssen je nach tiefe der Verschachtelung mit ‚depth0‘, ‚depth1‘ ect. benannt werden. Wenn du mehr als 2 Ebenen brauchst frag nochmal, ich bau dann den Algorithmus entsprechend um.
das onLoad Ereignis im BODY muss immer so aussehen. Das onChange Ereigniss ebenfalls.

\<!--
selectTree=[
 {text:'Office-Paket',value:'Office-Paket',children:[
 {text:'Word',value:'Word'}
 ,{text:'Excel',value:'Excel'}
 ,{text:'Access',value:'Access'}
 ]
 }
 ,{text:'Betriebssystem',value:'Betriebssystem',children:[
 {text:'Win95',value:'Win95'}
 ,{text:'Win98',value:'Win98'}
 ,{text:'WinMe',value:'WinMe'}
 ,{text:'WinNt',value:'WinNt'}
 ,{text:'Win2k',value:'Win2k'}
 ,{text:'WinXP',value:'WinXP'}
 ]
 }
]


function setSelect(depth,selected)
{
 select=document.getElementById('depth'+depth);
 if(select.length)
 {
 while(select.length)
 {
 select.remove(0);
 }
 }
 if(depth==0)setOptions(selectTree,select,0)
 else if(depth==1)setOptions(selectTree[selected].children,select,1)
}

function setOptions(selectChildren,selectObj,depth)
{
 for(var x in selectChildren)
 {
 selectObj.options[x]=new Option(selectChildren[x].text,selectChildren[x].value,false,false)
 }
 if(selectChildren[selectObj.selectedIndex].children)setOptions(selectChildren[selectObj.selectedIndex].children,document.getElementById('depth'+(depth+1),depth+1));

}


//--\>

Grüße
Stefan

1 Like
#7

Hallo, mir war langweilig…

Wenn du mehr als 2 Ebenen brauchst frag nochmal, ich bau dann
den Algorithmus entsprechend um.

jetzt gehts bis in unendliche Verschachtelungstiefe…

das onLoad Ereignis im BODY muss immer so aussehen. Das
onChange Ereigniss ebenfalls.

In dieser Version einfach die Nummer der zu ändernden Selectbox angeben…

\<!--
selectTree=[
 {text:'Office-Paket',value:'Office-Paket',children:[
 {text:'Word',value:'Word'}
 ,{text:'Excel',value:'Excel'}
 ,{text:'Access',value:'Access'}
 ]
 }
 ,{text:'Betriebssystem',value:'Betriebssystem',children:[
 {text:'Win95',value:'Win95'}
 ,{text:'Win98',value:'Win98'}
 ,{text:'WinMe',value:'WinMe'}
 ,{text:'WinNt',value:'WinNt',children:[
 {text:'SP2',value:'SP2'}
 ,{text:'SP3',value:'SP3'}
 ,{text:'SP4',value:'SP4'}
 ,{text:'SP5',value:'SP5'}
 ,{text:'SP6',value:'SP6'}
 ]}
 ,{text:'Win2k',value:'Win2k'}
 ,{text:'WinXP',value:'WinXP'}
 ]
 }
]


function setSelect(depth)
{
 select=document.getElementById('depth'+depth);
 if(select.length)
 {
 while(select.length)
 {
 select.remove(0);
 }
 }
 setOptions(getSelectTree(depth),select,depth);
}

function getSelectTree(depth)
{
 var obj=selectTree;
 for(x=1;x\<=depth;x++)
 {
 obj=obj[document.getElementById('depth'+(x-1)).selectedIndex].children;
 }
 return obj
}


function setOptions(selectChildren,selectObj,depth)
{
 for(var x in selectChildren)
 {
 selectObj.options[x]=new Option(selectChildren[x].text,selectChildren[x].value,false,false)
 }
 if(selectObj.selectedIndex\>=0 && selectChildren[selectObj.selectedIndex].children)setOptions(selectChildren[selectObj.selectedIndex].children,document.getElementById('depth'+(depth+1),depth+1));

}


//--\>

Grüße
Stefan

#8

Die Funktion setSelect aus der vorherigen Version bitte noch gegen diese austauschen:

function setSelect(depth)
{
 var clearSelect=depth;
 while(clearSelectObj=document.getElementById('depth'+clearSelect)) 
 {
 clearSelect++;
 if(clearSelectObj.length)
 {
 while(clearSelectObj.length)
 {
 clearSelectObj.remove(0);
 }
 }
 }
 var select=document.getElementById('depth'+depth);
 setOptions(getSelectTree(depth),select,depth);
}
#9

Vielen vielen Dank!!!
Mein Formular sieht richtig cool aus :smile:
Danke schön Stefan, dass du dir so eine Arbeit gemacht hast!!
Habe deine erste Variante genommen und sie noch ein kleines bisschen erweitert.
Wie lang arbeitest du schon mit JavaScript, um sowas zu können? Und selbst beigebracht oder irgendwo gelernt? Wenn ich mal ganz neugierig fragen darf :wink:
mfG Tina

#10

Autodidaktisch seit ca. 6 Jahren. Jetzt, da ich ja schonmal so offen war, möcht ich natürlich gerne wissen welchem Auswuchs - oops sorry - welcher Erscheinung von Webcontent ich da meine Tastatur und 'nen Stündchen Zeit gewidmet habe? Riecht nach Umfrage oder Shop. Keine Bange ich werd’s nicht weitersagen…
Grüße
Stefan

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#11

Autodidaktisch seit ca. 6 Jahren. Jetzt, da ich ja schonmal so
offen war, möcht ich natürlich gerne wissen welchem Auswuchs -
oops sorry - welcher Erscheinung von Webcontent ich da meine
Tastatur und 'nen Stündchen Zeit gewidmet habe? Riecht nach
Umfrage oder Shop. Keine Bange ich werd’s nicht weitersagen…
Grüße
Stefan

Nein, weder Umfrage noch Shop :wink:
Hab dir grad ne eMail geschrieben, da kannst du dir wenn du möchtest meinen „Auswuchs“ im Anhang mal ansehen :wink:
mfG Tina