6 svar · 506 visningar · startad av Inferis
Hej!
Hur gör man för att expandera en tabell på enklast möjligaste vis?
Jag har testat med div i tabellen, men det blir inte bra.
<table>
<tr><td>Bild med plustecken</td><td>Denna text ska alltid synas</td><td>Denna text syns vid klick på bilden</td></tr>
<tr><td></td></td>Denna raden kommer fram när man klickat på bilden</td><td></td></tr>
</table>
Man ska även kunna stänga det som öppnats igen. Bilden med plustecken ska bytas ut till en bild med minustecken.
Var det så svårt?
För att kunna göra detta fullt ut behöver du använda lite JavaScript också,
jag flyttar över din tråd till det forumet och hoppas på att du får ett svar där. :)
Går det inte att göra med css?
Exempel på hur du kan göra om du vill använda dig av javascript:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exempel</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function show(x,y)
{
if(!document.getElementById(y))
return false;
with(document.getElementById(y).style)
{
if(x)
display = "";
else
display = "none";
}
return true;
}
</script>
</head>
<body>
<table>
<tr>
<td onmousedown="show(true,'dintext');" onmouseup="show(true,'dintext2'); show(false,'dintext');" style="background:#f00;">Bild med plustecken</td>
<td>Denna text ska alltid synas</td>
<td id="dintext" style="display:none;">Denna text syns vid klick på bilden</td>
</tr>
<tr>
<td id="dintext2" style="display:none;">Denna raden kommer fram när man klickat på bilden</td>
</tr>
</table>
</body>
</html>
Tack yador! En riktigt bra början!
Men om man vill stänga tabellen igen? Det ska ju bli ett minustecken när man öppnat tabellen som man kan klicka på för att stänga igen.
Texten till höger var menad att synas när man klickat på plustecknet. Inte onmousedown.
Sen för att krångla till det ytterligare så kommer det bli flera <tr> där varje ska kunna expanderas.
Om du har hela rader som ska visas och döljas bör du använda en separat tbody runt. Sätter man display:none på en td så kommer cellen fortfarande att ta plats om det finns andra synliga celler i kolumnen.
För att visa tbodyn sätter man display: table-row-group