Gå til innhold

Hjelp med å lage skjulte / expandable tabeller

Palme

Anbefalte innlegg

Palme

Palme

Skrevet
Skrevet

Jeg har flere tabeller (fra en database) der jeg ønsker å først vise en og en rad med tekst, men hvis du klikker på raden vil den ekspandere og vise all informasjon knyttet til raden.

 

Ser for meg at jeg må ty til enten Ajax eller Javascript? Noen som har erfaringer med dette og kan hjelpe meg litt på vei?

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Matsemann

Matsemann

Skrevet
Skrevet

Å bruke AJAX eller Javascript blir akkurat det samme når det gjelder vis/skjul funksjonen. Eneste forskjellen er at du med AJAX da også laster inn dataen etter at man trykker vis, mens jeg med JS tenker du har det der fra før av, bare skjult.

 

Jquery har hva du trenger.

Ellers kan man jo lett ha vis/skjul funksjonalitet uten å ty til jquery.

<script type="text/javascript" language="javascript">
function VisEllerSkjul(id) {
if (document.getElementById(id).style.display == "none") {
	document.getElementById(id).style.display = "block";
	}else{
	document.getElementById(id).style.display = "none";
	}
}
</script>

Litt fort ut i fra hodet, men bør virke.

Så kan du bruke denne for å vise/skjule.

<a href="#" onclick="VisEllerSkjul('id_på_det_som_skal_endres'); blur(); return false;">Skjul/Vis</a>

Lenke til kommentar
Palme

Palme

Skrevet
  • Forfatter
Skrevet (endret)

Å bruke AJAX eller Javascript blir akkurat det samme når det gjelder vis/skjul funksjonen. Eneste forskjellen er at du med AJAX da også laster inn dataen etter at man trykker vis, mens jeg med JS tenker du har det der fra før av, bare skjult.

 

Jquery har hva du trenger.

Ellers kan man jo lett ha vis/skjul funksjonalitet uten å ty til jquery.

<script type="text/javascript" language="javascript">
function VisEllerSkjul(id) {
if (document.getElementById(id).style.display == "none") {
	document.getElementById(id).style.display = "block";
	}else{
	document.getElementById(id).style.display = "none";
	}
}
</script>

Litt fort ut i fra hodet, men bør virke.

Så kan du bruke denne for å vise/skjule.

<a href="#" onclick="VisEllerSkjul('id_på_det_som_skal_endres'); blur(); return false;">Skjul/Vis</a>

 

Jquery ser jo ut til å være ganske nøyaktig det jeg er på jakt etter.

 

 

Om du kunne klart deg med at tabellen vises når musen hviler over kunne du ha gjort hele jobben med CSS.

 

Det kan jeg muligens klare meg med. Hvordan går jeg frem for å få dette til?

 

edit*

Prøver meg litt frem med jquery

Endret av Palme
Lenke til kommentar
Matsemann

Matsemann

Skrevet
Skrevet (endret)

Men det er ikke alltid like brukervennlig. Dessuten har IE6 gitt meg en frykt for å bruke :hover på alt annet enn lenker, og det henger fortsatt igjen. :p

Okey, ikke helt seriøst, men.

 

Uansett, jeg kjedet meg i norsken og laget et lite eksempel.

http://webskolen.com/nwfsider/skjultest.html

 

Endret: Kom et svar mens jeg drev på.

 

Endret2: Tror jeg missforstod litt når det gjelder nøyaktig hva du ønsket. Du mente ekspandere horisontalt?

Endret av Matsemann
Lenke til kommentar
Palme

Palme

Skrevet
  • Forfatter
Skrevet (endret)

Neida, du tenkte helt! Jeg ønsker at det skal ekspandere vertikalt noe alà eksempelet ditt.

 

Jeg har en svær liste med navn, og jeg ønsker at dersom jeg klikker på navnet skal all info som ligger i databasen på det navnet jeg klikker på vise under navnet.

 

*edit formulering

Endret av Palme
Lenke til kommentar
greygenic

greygenic

Skrevet
Skrevet (endret)

Mitt forslag, der det er nok at musa hviler over (jeg har ikke noen passende server å vise på):

 

<html>
<head>
<style>
.hide {display:none; background-color:#F8F8F8;}

.even {background-color:#D0D0D0}
.odd {background-color:#E8E8E8}

.seek table:hover tr {display:table-row; text-align:center}
</style>
</head>
<body>
<?php
for ($t = 0; $t < 5; $t++)
{
	echo
	"
		<div class='seek'>
			<table width='500px' cellpadding='10px'>
	";

	if ($t % 2 != 0) echo "<tr class='odd'>"; else echo "<tr class='even'>";

	echo
	"
					<th>
						Hode 1
					</th>
					<th>
						Hode 2
					</th>
					<th>
						Hode 3
					</th>
				</tr>
				<tr class='hide'>
					<td>
						Kropp 1
					</td>
					<td>
						Kropp 2
					</td>
					<td>
						Kropp 3
					</td>
				</tr>
			</table>
		</div>
	";
}
?>
</body>
</html>

 

Koden som genererer innholdet må du selvsagt bytte ut.

 

Og antall celler og rader får du bare skrive om på, om koden skulle være av interesse.

Endret av greygenic
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...