✔ beim klick auf einen Textlink, weiteren inhalt anzeigen

J

JamesT

Erfahrenes Mitglied
Auf und Zuklappen einer Tabelle mit Javascript

Hallo Leute, es geht um folgendes,

ich hab schon das forum und google durchsucht, aber nicht wirklich eine lösung gefunden,
ich hab in meiner druckerdatenbank einen link names "info" wenn man auf diesen klickt sollen weitere informationen zu diesem Drucker angezeigt werden. Also sozusagen "aufklappen" und wenn man nochmal klickt wieder zuklappen.

So wie hier zum Beispiel:

http://javascript.internet.com/css/page-organizer.html

ich hab das versucht einzubauen aber nicht hinbekommen, es funktioniert einfach nicht, das was auf und zugeklappt werden soll steht immer von vornherein schon da.

Habt Ihr Ideen für eine Realisierung, wenn möglich auch ohne java.

Vielen Dank im voraus für eure Ideen. ;-)

Das ist mein Code: ich habe die stelle mit einem Kommentar versehen

PHP: 
<?PHP
	mysql_connect("192.168.0.235","root");
	mysql_select_db("martin");

	if($id){
		mysql_query("DELETE FROM drucker WHERE id=".$_GET['id']);
	}
	if($hersteller){
	mysql_query("INSERT INTO drucker (hersteller,modell,anschluss,funktion,ps,firmware,dot4,pjl,ecp,fastmode,portmode) VALUES('".$_POST['hersteller']."','".$_POST['modell']."','".$_POST['anschluss']."','".$_POST['funktion']."','".$_POST['ps']."','".$_POST['firmware']."','".$_POST['dot4']."','".$_POST['pjl']."','".$_POST['ecp']."','".$_POST['fastmode']."','".$_POST['portmode']."')");

}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Druckerdatenbank</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK href="druckerdb.css" type=text/css rel=STYLESHEET>
</head>
<body>
<br>
<div align="center"> <a href="eintragen.php">eintragen</a> | <a href="delete.php">löschen</a> 
  | <a href="edit.php">bearbeiten</a><br>
  <br>
  folgende Drucker befinden sich in der datenbank:<br>
  <br>
  kompatible Drucker:<br>
  <br>
</div>
<div align="center"> 
  <table width="950" border="1" cellspacing="0" cellpadding="0">
    <tr bgcolor="#FFDA99"> 
      <td width="150" align="center">Hersteller</td>
      <td width="170" align="center">Modell</td>
      <td width="120" align="center">Printserver</td>
      <td width="70" align="center">Firmware</td>
      <td width="70" align="center">Anschluss</td>
      <td width="40" align="center">OK?</td>
      <td width="60" align="center">1284.4</td>
      <td width="50" align="center">PJL</td>
      <td width="50" align="center">ECP</td>
      <td width="70" align="center">Fastmode</td>
      <td width="70" align="center">Portmodus</td>
      <td width="30" align="center">info</td>
    </tr>
    <?PHP
$query = mysql_query("SELECT * FROM drucker WHERE funktion='ja' ORDER BY hersteller,modell ASC");
while($row=mysql_fetch_array($query)){
	echo       '<tr bgcolor="#FFF1C7">';
	echo       '<td width="150" align="center">'.$row[hersteller].'</td>';
	echo       '<td width="170" align="center">'.$row[modell].'</td>';
	echo       '<td width="120" align="center">'.$row[ps].'</td>';
	echo       '<td width="70" align="center">'.$row[firmware].'</td>';
	echo       '<td width="70" align="center">'.$row[anschluss].'</td>';
	echo       '<td width="40" align="center">'.$row[funktion].'</td>';
	echo       '<td width="60" align="center">'.$row[dot4].'</td>';
	echo       '<td width="50" align="center">'.$row[pjl].'</td>';
	echo       '<td width="50" align="center">'.$row[ecp].'</td>';
	echo       '<td width="70" align="center">'.$row[fastmode].'</td>';
	echo       '<td width="70" align="center">'.$row[portmode].'</td>';
// Hier ist die Tabellenzeile mit dem text info, bei dem Klick auf info soll sich dann die nächste <tr></tr> hinzufügen
	echo       '<td width="30" align="center">info</td>';
	echo       "</tr>";	
// Dieser Teil soll aufklappen bei einem Klick auf info
	echo	   '<tr bgcolor="#FFF1C7">';
	echo	   '<td align="center" valign="top">Bemerkungen</td>';
	echo       '<td colspan="11">'.nl2br($row[bemerkungen]).'&nbsp;</td>';
	echo       "</tr>";
// Hier endet das was aufgeklappt werden soll
	echo	   "<tr>";
	echo	   '<td colspan="12" height="5"><img src="blank.gif" width="1" heigth="1"></td>';
	echo       "</tr>";

}
?>
  </table>
</div>
</body>
</html>
<?PHP
	mysql_close();
?>
 
Zuletzt bearbeitet:
Also ohne JS fällt mir die Variante CSS ein.
mit den Atrributen visibility und hover läßt sich sowas sogar ohne klick realisieren.

Klick vorausgesetzt kannst du mit JS das Zeugs einblenden lassen.

Ansonsten mit PHP benötigst du nen reload der Seite.
 
Das hört sich doch schonmal gut an.

Da es mit einem click sein muss, wie sieht die javascript variante aus ?
 
JamesT hat gesagt.:
ich hab schon das forum und google durchsucht, aber nicht wirklich eine lösung gefunden,
Zum Vergrößern anklicken....

Wonach hast du denn gesucht?
Wenn du im JS-Board bspw.nach "aufklappen" suchst, bekommst du Dutzende Treffer.

Einen Eintrag in den Webmaster-FAQ gibts auch zum Thema.
 
ok, ich hab jetzt folgendes versucht.

ich verwende das:

http://www.tutorials.de/tutorials130001.html

im head habe ich dieses:

PHP: 
<script language="JavaScript" type="text/javascript"> 
<!-- 
function einblenden(div) { 
  with(document.getElementById(div).style){ 
    if(display=="none"){ 
      display="inline"; 
    } 
    else{ 
      display="none"; 
    } 
  } 
} 
//--> 
</script>

so und dann

sieht es in meinem quelltext so aus:

PHP: 
  <table width="680" border="1" cellspacing="0" cellpadding="0">
    <tr bgcolor="#FFDA99"> 
      <td width="170" align="center">Hersteller</td>
      <td width="170" align="center">Modell</td>
      <td width="120" align="center">Printserver</td>
      <td width="170" align="center">Firmware</td>
      <td width="50" align="center">comments</td>
    </tr>
    <?PHP
$query = mysql_query("SELECT * FROM drucker WHERE funktion='ja' ORDER BY hersteller,modell ASC");
while($row=mysql_fetch_array($query)){
	echo       '<tr bgcolor="#FFF1C7">';
	echo       '<td width="170" align="left">&nbsp;&nbsp;'.$row[hersteller].'</td>';
	echo       '<td width="170" align="left">&nbsp;&nbsp;'.$row[modell].'</td>';
	echo       '<td width="120" align="center">'.$row[ps].'</td>';
	echo       '<td width="170" align="left">&nbsp;&nbsp;'.$row[firmware].'</td>';
	echo       '<td width="50" align="center"><a href="#" onClick="einblenden(\'ebene1\'); return false;">comments</a></td>';
	echo       '</tr>';
	echo	   '<div id="ebene1" style="display:none;">';
	echo	   '<tr bgcolor="#FFF1C7">';
	echo	   '<td align="center" valign="top">Bemerkungen</td>';
	echo       '<td colspan="11">'.nl2br($row[bemerkungen]).'&nbsp;</td>';
	echo       '</tr>';
	echo	   '<tr>';
	echo	   '<td colspan="12" height="5"><img src="blank.gif" width="1" heigth="1"></td>';
	echo       '</tr>';
	echo	   '</div>';	

}
?>
  </table>

Das Problem ist schaue ich mir die seite jetzt an, dann ist das ganze schon ausgeklappt, die bemerkungen die also erst mit einem klick angezeigt werden sollen, sind also schon da.

Was mache ich falsch, der klick auf comments bewirkt irgendwie garnichts.

Danke im voraus für eure hilfe.

Grüße

JamesT
 
Ok, ich gebe mal ein kleines update,

ich habe über Suchen mal nach aufklappen gesucht.

Habe einige scripte gefunden und diese auch gleich mal ausprobiert,
wenn ich normalen text nehme der dann erscheinen soll, geht das,
nehme ich jedoch tabellen, dann sind diese tabellen immer schon
vorher sichtbar, ehe ich überhaupt auf ausklappen klicke.

Ich brauch also irgend eine Lösung mit der ich eine Tabellen zeile
hinzufügen kann, in der dann die bemerkungen aus meiner DB drinstehen.

Ich freue mich auf eure Antworten.

Grüße

JamesT
 
Ich hab zum besseren Verständnis mal eine Datei angehängt, dort könnt ihr dann genau sehen was ich meine und mich vielleicht auch besser verstehen.

Danke

Grüße

JamesT
 

Anhänge

  • info.jpg
    info.jpg
    40,6 KB · Aufrufe: 99
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück