Textfeld ausblenden!

BSA · 22. März 2005

Hi Leute!

ich habe eine Tabelle, mit Textfeldern ( http://icespeedskater.de/basti/ ). Nun möchte ich mittels Dropdown Liste nur bestimmte Textfelder einblenden (nur die Farbe die ausgewählt wurde). Kann mir jemand helfen und sagen wie ich Textfelder ausblenden kann. Also mittels Dropdown liste?

BSA · 22. März 2005

Da mir auf diese Frage scheinbar niemand eine Antwort geben kann, habe ich jetzt mal eine andere Lösung probiert, jedoch funktioniert das noch nicht ganz für alle Spalten, sondern nur für die erste Zelle in der ersten Spalte. Vielleicht hat da jemand noch ne Idee?

Quelltext:

PHP:

<html>
<head>
<title></title>
<meta name="author" content="Markus">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
<!--
table {
	font-family:verdana;
	font-size:10px;
}
input {
	font-family:verdana;
	font-size:10px;
	width:12px;
	text-align:center;
}
-->
</style>
<script language="JavaScript" type="text/javascript">

function checkIt(){
	if(document.getElementById('auswahl').selectedIndex==0){
		document.getElementById('1').disabled=false;
	} else {
		document.getElementById('1').disabled=true;
	}
	
	if(document.getElementById('auswahl').selectedIndex==1){
		document.getElementById('2').disabled=false;
	} else {
		document.getElementById('2').disabled=true;
	}

	if(document.getElementById('auswahl').selectedIndex==2){
		document.getElementById('3').disabled=false;
	} else {
		document.getElementById('3').disabled=true;
	}

	if(document.getElementById('auswahl').selectedIndex==3){
		document.getElementById('4').disabled=false;
	} else {
		document.getElementById('4').disabled=true;
	}

	if(document.getElementById('auswahl').selectedIndex==4){
		document.getElementById('5').disabled=false;
	} else {
		document.getElementById('5').disabled=true;
	}

}

</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<form name="Test">
<table style="width:100%; border-top:1px solid #000000; border-left:1px solid #000000; border-right:1px solid #000000;" cellpadding="5" cellspacing="0">
 <tr>
  <td style="border-bottom:1px solid #000000;">Zeit</td>
  <td style="border-bottom:1px solid #000000; text-align:center;">Montag</td>
  <td style="border-bottom:1px solid #000000; text-align:center;">Dienstag</td>
  <td style="border-bottom:1px solid #000000; text-align:center;">Mittwoch</td>
  <td style="border-bottom:1px solid #000000; text-align:center;">Donnerstag</td>
  <td style="border-bottom:1px solid #000000; text-align:center;">Freitag</td>
  <td style="border-bottom:1px solid #000000; text-align:center;">Samstag</td>
  <td style="border-bottom:1px solid #000000; text-align:center;">Sonntag</td>
 </tr> 
 <?PHP
 
 for($i=10;$i<=22;$i++){
 	
 	echo"<tr><td style=\"border-bottom:1px solid #000000;\">". $i." Uhr</td>";
 	echo"<td style=\"border-bottom:1px solid #000000; text-align:center;\"><input id=\"1\" type=\"Text1\" style=\"border:1px solid #FF0000;\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" size=\"1\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #0000FF;\" id=\"2\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #000000;\" id=\"3\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #00FF00;\" id=\"4\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #FFBF00;\" id=\"5\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"></td>";
	echo"<td style=\"border-bottom:1px solid #000000; text-align:center;\"><input id=\"1\" type=\"Text1\" style=\"border:1px solid #FF0000;\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" size=\"1\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #0000FF;\" id=\"2\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #000000;\" id=\"3\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #00FF00;\" id=\"4\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #FFBF00;\" id=\"5\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"></td>";
	echo"<td style=\"border-bottom:1px solid #000000; text-align:center;\"><input id=\"1\" type=\"Text1\" style=\"border:1px solid #FF0000;\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" size=\"1\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #0000FF;\" id=\"2\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #000000;\" id=\"3\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #00FF00;\" id=\"4\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #FFBF00;\" id=\"5\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"></td>";
	echo"<td style=\"border-bottom:1px solid #000000; text-align:center;\"><input id=\"1\" type=\"Text1\" style=\"border:1px solid #FF0000;\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" size=\"1\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #0000FF;\" id=\"2\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #000000;\" id=\"3\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #00FF00;\" id=\"4\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #FFBF00;\" id=\"5\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"></td>";
	echo"<td style=\"border-bottom:1px solid #000000; text-align:center;\"><input id=\"1\" type=\"Text1\" style=\"border:1px solid #FF0000;\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" size=\"1\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #0000FF;\" id=\"2\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #000000;\" id=\"3\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #00FF00;\" id=\"4\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #FFBF00;\" id=\"5\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"></td>";
	echo"<td style=\"border-bottom:1px solid #000000; text-align:center;\"><input id=\"1\" type=\"Text1\" style=\"border:1px solid #FF0000;\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" size=\"1\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #0000FF;\" id=\"2\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #000000;\" id=\"3\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #00FF00;\" id=\"4\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #FFBF00;\" id=\"5\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"></td>";
	echo"<td style=\"border-bottom:1px solid #000000; text-align:center;\"><input id=\"1\" type=\"Text1\" style=\"border:1px solid #FF0000;\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" size=\"1\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #0000FF;\" id=\"2\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #000000;\" id=\"3\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #00FF00;\" id=\"4\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"> - <input type=\"Text\" style=\"border:1px solid #FFBF00;\" id=\"5\" onClick=\"this.value='x'\" onDblClick=\"this.value=''\" value=\"\" maxlength=\"1\"></td>";
	echo"</tr>";
 } 
 ?>
 <tr>
  <td style="border-bottom:1px solid #000000;"><select id="auswahl" onChange="checkIt()"><option style="color:#FF0000;" />Zak<option style="color:#0000FF;" />Spak<option style="color:#000000;" />Basti<option style="color:#00FF00;" />Nugat<option style="color:#FFBF00;" />Lucky</select></td>
 </tr>
</table>
</form>
</body>
</html>

redX · 22. März 2005

Habe dienen Codeblock nun nicht angeschaut. Aber wenn du die Felder in ein DIV knallst kannst du beim dropdown den onChange verwenden. und wenn das angewählt wurde, dann blende das div (also die feldem im div) ein und sonst blende sie aus. verstenden?

HTML:

<SELECT NAME="mySelect" onChange="showFields(this.options[this.selectedIndex].text)">
<OPTION>text1
<OPTION>text2</SELECT>
<div id="myDIV" style="visibility:hidden">
<table>
<tr>
<td><INPUT NAME="feld1" VALUE=""></td>
</tr>
<tr>
<td><INPUT NAME="feld2" VALUE=""></td>
</tr>
</table>
</div>

HTML:

function showFields(obj) {
	
	if (obj == 'text1')
		document.all.myDIV.style.visibility='hidden';
	else
		document.all.myDIV.style.visibility='visible';
}

Habe das Script nicht getestet. Solte aber so ähnlich .

MFG

BSA · 22. März 2005

Vom Prinzip her Funktioniert es ja, auch mit deinem Script, aber scheinbar nicht wenn die einzelnen Spalten oder Layer mit einer Schleife (PHP) erzeugt werden. Dann Blendet er lediglich das erste Element ein oder aus.

redX · 22. März 2005

Das macht keinen Unterschied ob du es mit PHP oder ohne machst. Denn JS und PHP kommen sich ganz sicher nicht in die Quere da, wie du sicher weisst, das eine auf dem Server und das andere auf dem Client abläuft.

Poste mal den neuen Code. Wenn all das PHP zeugs funktioniert, poste mal nur der Code, den du bekommst, wenn du den Quellcode im Browser anzeigst. Denn dort muss irgendwo ein Wurm liegen...

MFG

BSA · 22. März 2005

Ich hänge mal ne PDF Datei an, in dem der Qulltext steht, weil ich hie rnicht soviel Zeichen schreiben darf.
Kannst dir aber auch selber angucken:

http://www.icespeedskater.de/basti/index.php

Malleus · 22. März 2005

@BSA:
In Deinem Script vergibst Du mehrfach die gleiche ID. Wenn Du dann getElementById aufrufst, bekommst Du immer das erste Element mit dieser ID. Das ist wohl die Erklärung für Dein Problem.

Versuch' mal folgendes:

farbeA: ID="a1", "a2","a3", ....
farbeB: ID="b1", "b2","b3", ....
usw.

Dann
for (var i=0;i<ElementAnzahl;i++) document.getElementById("a"+i).style.display="none" //bzw. "block".

Ich will das ganze hier nicht komplett ausprogrammieren. Ist klar was ich meine?

tschau

Frank

Textfeld ausblenden!

BSA

Erfahrenes Mitglied

BSA

Erfahrenes Mitglied

redX

Erfahrenes Mitglied

BSA

Erfahrenes Mitglied

redX

Erfahrenes Mitglied

BSA

Erfahrenes Mitglied

Anhänge

Malleus

Mitglied

Neue Beiträge