Hallo!
Ich arbeite gerade an einer kleine Homepage wo ich meine Entwicklungen vorstellen kann. Dazu sind für den Inhalt Tabellen vorgesehen. Bei einem Klick auf die erste Zeile der Tabelle sollen alle anderen Zeilen DIESER Tabelle angezeigt werden. Beim nächsten Klick wieder ausgeblendet.
Das Ganze ist kein Problem solange ich nur eine Tabelle habe. Sobald aber zwei Tabellen vorhanden sind, bei denen die ersten Zeilen mit den selben CSS-ID's markiert sind, werden natürlich alle Informationen zu allen Produkten eingeblendet.
Hier ist mein bisheriger Code:
HTML:
HTML
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$("tr#name").click(function(){
$("tr#detail").toggle();
});
});
</script>
</head>
<body>
<table border="0">
<tr id="name"><td><a href="#">Produktname</a></td></tr>
<tr id="detail"><td>Details 1</td></tr>
<tr id="detail"><td>Details 2</td></tr>
</table>
<table border="0">
<tr id="name"><td><a href="#">Produktname</a></td></tr>
<tr id="detail"><td>Details 1</td></tr>
<tr id="detail"><td>Details 2</td></tr>
</table>
</body>
</html>CSS:
Code
body{}
tr#name{
background-color: #CCCCCC;
}
tr#detail{
background-color: #DDDDDD;
}
a{
display: block;
}Nun ja, das ist natürlich nicht der fertige Code, aber zum Testen sollte das genügen.
Wäre sehr glücklich wenn jemand einen Tipp hätte!
mfg phzu
Ja dann wär das sicher ne Überlegung, allerdings ist es schon möglich dass die detailierten Daten dann mehrere Spalten haben.