Tabellenfeld bei Mouse Over Aufklappen /Erweitern

M

Mastershort

Grünschnabel
Hallo

ich bin totaler Neuling was JavaScript angeht , aber ich habe wohl keine Chance .
Folgendes Problem ich lese Daten aus einer Datenbank aus, und Schreibe die in eine Tabelle.
SO:
...
while ($zeile = mysql_fetch_array($db_erg, MYSQLI_ASSOC))
{
echo '<table border ="1">';

echo "<tr>";
echo "<td>" . $zeile ['name'] . "</td>";
echo "<td>" . $zeile ['betreff'] . "</td>";
echo "<td>" . $zeile ['thema'] . "</td>";
echo "<td>" . $zeile ['details'] . "</td>";
echo '</table>';

}

bis hier hin einfach .

Das Tabellen Feld "details" beinhaltet viel Text. Also sieht die Tabelle natürlich bescheiden aus.
Ich möchte das das Feld "details" nur so viel anzeigt bis eine Zeile voll ist , und erst beim überfahren mit der Maus alles Angezeigt wird.
Vorher:
I NAME I Betreff I Thema I Details Details ...I
Nachher:
I NAME I Betreff I Thema I Details Details Details DetailsDetails Details
Details Details Details Details Details Details
Details Details Details Details Details Details

Und ja ich habe schon die Suche genutzt aber nichts gefunden , was mir gefällt.

MFG

Mastershort
 
Hier mal ein Ansatz, wie sowas machbar wäre. Das wichtigste ist "height:1em;" und "overflow:hidden;"

Dir fehlt übrigens ein schließendes "tr".

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Page title</title>
	
	<style type="text/css">
		.expandable {
			height:1em;
			overflow:hidden;
		}
	</style>
</head>

<body>
	<div>
		<table border="1">
			<tr>
				<td>Foo</td>
				<td>Bar</td>
				<td>
					<div class="expandable">
					Lorem ipsum cu soluta consequat pro. Id sit munere meliore, ea autem efficiantur has, assum suscipiantur in eum. Ut eam natum insolens, ad laoreet consectetuer mea. In sed ludus alienum voluptaria. Iisque inermis periculis cum in, modus dicat recteque eum ad. Alia erroribus assueverit ut nam, usu in modus impedit.

Inermis definitionem eu usu, nec te efficiantur neglegentur. Unum ferri solet ei sed. Vel eu sint iusto voluptua. Sed postea referrentur voluptatibus ex. Copiosae deserunt quo ut, nec ut nusquam moderatius percipitur. Alii habemus senserit mei ut, ius ullum phaedrum inimicus id, ei gloriatur vulputate has.

Pro no nulla invenire accommodare, nam id mediocrem necessitatibus. Ut salutandi instructior usu. Te idque prompta voluptaria sed, ad eum nostrud corpora. Vix no graece reprimique definitiones. Possim labitur ne mei. Sit omnis mutat eu, no sea dolore accumsan dissentiet.

Cu est rebum falli consectetuer, in pri audire corpora. Usu et alii mundi soluta. Choro graece numquam at qui. Qui probatus sensibus sententiae ex.

Sea no placerat comprehensam signiferumque, id mucius melius erroribus pro, pro in prima mollis audiam. Eum tale percipit et, no mei modus admodum facilisis, eum ex invenire molestiae conclusionemque. Eam ea vide lobortis disputationi, invidunt euripidis disputationi ut sed. At quaestio disputationi has, choro referrentur in quo. Erant sonet munere in vim.

Et qui diam splendide, maiorum recteque an pro, saepe aliquip sadipscing vel ea. An placerat incorrupte scriptorem vim. Omnes laudem soleat ut nec, ut cum zzril dicunt appellantur. Ea eum errem fuisset. Has liber deserunt eleifend eu, no nam soluta civibus. Cu vis suscipit invenire.

Puto consequat pertinacia eam ea. Eos illum tollit soleat cu, sed dico rebum ceteros ex. In cum nostro mandamus. Nibh dolor eam ex. Rebum ceteros indoctum vis ut. Prompta expetenda reprimique id sed.

Quo ea bonorum accumsan repudiare. Petentium maluisset per in, mea cu malis nostrud invidunt. Pri ut graeci viderer. Graeco option takimata eum ad. Ea eruditi volumus mel, vel graeci possim ea.

Nam ei iuvaret repudiare ullamcorper, vim eius oblique eu, cu per copiosae phaedrum eleifend. Vel consul civibus cu, an vero elit expetendis usu, ad sed perpetua patrioque. Congue periculis gloriatur ad his, at eam elitr debitis. Ne minimum probatus usu, vix ex graece erroribus.

Sit ex vide probatus, possit dolores copiosae ex sit. Eu mutat posidonium per, ex pri solum maiorum perfecto. Ex euismod efficiantur complectitur per, probo mentitum petentium ea vel. Vis an convenire sapientem similique, animal fuisset ea eum. Sit fastidii suscipit necessitatibus no. Vim elitr platonem id. Dicat assum tantas ne eos, nam eu indoctum efficiantur.
					</div>
				</td>
			</tr>
		</table>
	</div>
	
	<script type="text/javascript">
	/* <![CDATA[ */
	var elements;
	
	if(document.getElementsByClassName) {
		elements = document.getElementsByClassName('expandable');
	} else {
		elements = [];
		alert('Hier sollte jetzt was sinnvolles für ältere Browser passieren.');
	}
	
	for(var i = 0; i < elements.length; i++) {
		elements[i].onmouseover = mouseIn;
		elements[i].onmouseout = mouseOut;
	}
	
	function mouseIn() {
		this.style.height = 'auto';
	}
	
	function mouseOut() {
		this.style.height = '1em';
	}
	/* ]]> */
	</script>
</body>

</html>

EDIT: Sofern du den IE6 außen vor lassen willst, kannst du auch das gesamte JavaScript löschen und folgendes CSS ergänzen

CSS: 
.expandable:hover {
	height:auto;
}
 
Zuletzt bearbeitet:
Super genau das was ich meinte . Wo bei ich natürlich nur Copy Paste betrieben habe , und nicht wirklich verstehe was da passiert.

Aber man muss auch nicht alles wissen.

MFG

Mastershort
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück