in einer Tabelle, per click, zeilen ein/ausblenden

Ronin_Cade

Grünschnabel
Hallo Leute,
verzeiht mir bitte falls ich hier gegen ein paar regeln verstoße, bin nicht wirklich bewandert mit den umgangsformen in einem forum xD

also kurze schilderung meines problems:
ich habe eine site geschrieben in der daten aus einer datenbank genommen werden und eine art tägliche zusammenfassung erstellt wird..
also quasi eine übersicht der laufenden woche.
das funktioniert ja auch soweit ;P

da aber meiner meinung nach die volle darstellung einem mit infos überrumpelt dacht ich mit, bau es so um dass wenn du auf das gewünschte datum klickst, soll auch nur der ausgewählte tabellen-teil erscheinen..

mein erste feldversuch mit javascript begann damit also ^^
hat auch wunderbar geklappt in meiner test-site ..
habe in einer tabelle in der ersten spalte den link für das JS, in der zweiten spalte öffne ich eine neue tabelle die dann eben ein/ausgeblendet wird..
-prima klappt... is aber auch nichts großes

problem bei der ganzen sache is jenes.. (endlich simmer soweit xD)
die "haupttabelle" hat einen tabellen kopf..
also "datum", "benutzername", "aktion" usw...
durch das einfügen einer komplett neuen tabelle wird natürlich die spaltenbreite der "haupt-tabelle" nicht übernommen.. also sieht die tabelle insgesammt aus wie kraut und rüben ^^

da die tabelle allerdings flexibel sein muss kann ich auch keine festen spaltenbreiten angeben.. sonst wär das ja nP...

also kann ich im endeffekt nur per klick mehrer "<tr>...</tr>" ein und ausblenden lassen..
mein script, das hier aus dem tutorial kommt "menü ein ausblenden" (oder so) kann allerdings nur ein objekt behandeln.. sprich es wird immer nur die erste zeile (<tr>) der zusammenfassung gezeigt.. also falls mal zb 5 aktionen auftauchen blendet es dennoch nur eines ein, und zerstört nebenbei noch die tabellenstruktur..

ich bin hier am verzweifeln, da ich kaum schimmer von java-script habe...

bitte um hülfe xD


HTML:
<html>
<head>
<title>Test</title>

<script type="text/javascript">
function swap_table( id ) 
{ 
displayType = ( document.getElementById( id ).style.display == 'none' ) ? '' : 'none'; document.getElementById(  id  ).style.display = displayType;
}

</script>

</head>
<body>
PHP:
   $db = mysql_connect($db_hostMaster,$db_userMaster,$db_passwordMaster);

   $query = "select * from test-Data Order by timeStart DESC";
   
   	if(mysql_num_rows($res = mysql_db_query($db_nameMaster,$query)) == 0) $data = array();	
		while ($row=mysql_fetch_assoc($res))	
		$data[$row['timeStart']][] = $row;

   	mysql_close($db);
	
   	
		$return  = '<table cellpadding="0" cellspacing="1" align="center" width="50%">';
		$return .= '<colgroup>
    						<col width="16,66%">
   	 						<col width="16,66%">
								<col width="16,66%">
								<col width="16,66%">
								<col width="16,66%">
								<col width="16,66%">
  							</colgroup>';		
   	$return .= '<tr bgcolor="silver"><td>Datum</td><td>CustomerID</td><td>ContractID</td><td>Currency</td><td>ccType</td><td>VolumeSale</td></tr>';

   	
$z = 0;
$y = 1;	
	foreach($data as $day => $statisticArray3)
	{	
	$i=0;

			$linkOpen = '<a href="#" onclick="swap_table('.$y.'); return false;">';
			$linkClose = '</a>';
 					
					foreach ($statisticArray3 as $data3)
					foreach($data3 as $k => $v2)
		   		{
		   			if (isset($sumDay[$day][$k]))
		   			$sumDay[$day][$k]+=$v2;
		   			else $sumDay[$day][$k] = $v2;
		  		}	 
				$return .= '<tr bgcolor="#DeFFFF"><td>'.$linkOpen.date('Y-m-d',$day).$linkClose.'</td><td>Summary</td><td>'.$sumDay[$day]['contractID'].'</td><td>'.$sumDay[$day]['currency'].'</td><td>'.$sumDay[$day]['type'].'</td><td>'.$sumDay[$day]['volumeSale'].'</td></tr>';	
  
	foreach ($statisticArray3 as $v)
	{
				
	 if ($z % 2 ) 	$color = '#99FFFF'; else 	$color = '#CCFFFF';

	 
	 $return .= '<tr id="'.$y.'" style="display: none"	>';
	 //$return .= '<tr>';
	  	if ($i == 0 )		  	  	
	  	$return .= '<td align="left" valign="top" rowspan="'.count($statisticArray3).'" bgcolor="#DeFFFF">-</td>';  	  
	  	$return .= '<td bgcolor="'.$color.'">'.$v['customerID'].'</td>';
	  	$return .= '<td bgcolor="'.$color.'">'.$v['contractID'].'</td>';
	  	$return .= '<td bgcolor="'.$color.'">'.$v['currency'].'</td>';
	  	$return .= '<td bgcolor="'.$color.'">'.$v['type'].'</td>';
	  	$return .= '<td bgcolor="'.$color.'">'.$v['volumeSale'].'</td>';	  			  	
	  	$return .= '</tr>';

	  	$z++;	 
	$i++;
	}	
	$y++;	
	}   	
  	
 echo $return;  	

?>
HTML:
</body>
</html>
 
Hi,

mal sehen, ob ich dein Problem richtig verstanden habe.

Du generierst Zeilen, in denen eine Zelle über mehrere Zeilen hinweg geht (rowspan). Du blendest mit deinem Script allerding nur eine einzelne Zeile aus, den Folgezeilen fehlt damit eine Zelle, wodurch die Fehldarstellung zustande kommt.

Lösung:
Du könntest das rowspan-Attribut in der Ausgangszeile auslesen. Damit ist dir bekannt, wieviele Zeilen ausgeblendet werden müssen. In einer Schleife blendest du nun die erforderliche Anzahl Folgezeilen ein bzw. aus.

Ciao
Quaese
 
Hi,

solange du die Zeile mit einem Leerstring und nicht mit block einblendest, sollte auch der Firefox damit zurecht kommen.
Code:
objTR.style.display = (objTR.style.display=="none")? "" : "none";
Ciao
Quaese
 
Danke für den kleinen Tipp... komischerweise hilft mir die Goß und Kleinschreibung bei meinem Problem nicht weiter.. aber im Grunde stimmt das ja. Aber dann wäre der schöne Post ja nicht aufgetaucht ^^

Lassen wir das Thema einfach, ich sehe ein, dass es ein Fehler war damit is das ja dann ok? Werde mich bessern, versprochen... sicherlich nicht sofort ^^

Also wie gesagt, bin ich dann doch noch erfolgreich geworden... bin selber erstaunt ^^
Das Script hab ich einfach mal angehängt.. es ist sicherlich nicht die feinste Art.. aber wer hat die schon xD

Schaut es euch doch mal an, vielleicht hilft es ja dem Einen oder Anderen hier..
Würde mich auch freuen wenn jemand Verbesserungsvorschläge hätte, die nicht grad die Netiquette betreffen
-tschuldigung, ich weiß du meitest es nicht böse
 

Anhänge

  • swap-content2.zip
    1,2 KB · Aufrufe: 37
Zurück