Notifikationer

Markér alle som læst Log ud

ravnborg Nybegynder

30. november 2008 - 22:11 Der er 7 kommentarer og
1 løsning

Skjul/vis x antal table rows

Hvordan kan man lave en skjul/vis funktion til table rows.

eks:
Jeg har en tabel med 10 <TR>. Jeg vil gerne have en knap som ved tryk skjuler/viser de sidste 5 <TR>, mens de første 5 altid bliver vist.

Synes godt om

roenving Novice

01. december 2008 - 17:54 #1

At skjule dem er ikke noget problem, det er visningen igen, der kan være problematisk, men et lille trick kan vel gøre det:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tomt dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
</style>
<script language="javascript" type="text/javascript">
var hideTrs = true;
function showHideTrs(){
var tbl = document.getElementById("minTabel");
var trs = tbl.getElementsByTagName("tr");
for(var i = 5; i < 10; i++){
trs[i].style.display = hideTrs ? "none" : "";
}
hideTrs = !hideTrs;
}
</script>
</head>
<body>
<table id="minTabel">
<tr>
<td>Tabelcelle 1 1</td>
<td>Tabelcelle 1 2</td>
<td>Tabelcelle 1 3</td>
</tr>
<tr>
<td>Tabelcelle 2 1</td>
<td>Tabelcelle 2 2</td>
<td>Tabelcelle 2 3</td>
</tr>
<tr>
<td>Tabelcelle 3 1</td>
<td>Tabelcelle 3 2</td>
<td>Tabelcelle 3 3</td>
</tr>
<tr>
<td>Tabelcelle 4 1</td>
<td>Tabelcelle 4 2</td>
<td>Tabelcelle 4 3</td>
</tr>
<tr>
<td>Tabelcelle 5 1</td>
<td>Tabelcelle 5 2</td>
<td>Tabelcelle 5 3</td>
</tr>
<tr>
<td>Tabelcelle 6 1</td>
<td>Tabelcelle 6 2</td>
<td>Tabelcelle 6 3</td>
</tr>
<tr>
<td>Tabelcelle 7 1</td>
<td>Tabelcelle 7 2</td>
<td>Tabelcelle 7 3</td>
</tr>
<tr>
<td>Tabelcelle 8 1</td>
<td>Tabelcelle 8 2</td>
<td>Tabelcelle 8 3</td>
</tr>
<tr>
<td>Tabelcelle 9 1</td>
<td>Tabelcelle 9 2</td>
<td>Tabelcelle 9 3</td>
</tr>
<tr>
<td>Tabelcelle 10 1</td>
<td>Tabelcelle 10 2</td>
<td>Tabelcelle 10 3</td>
</tr>
</table>
<div><button onclick="showHideTrs();return false;">Vis/Skjul de sidste 5 rækker</button></div>
</body>

</html>

Synes godt om

olebole Juniormester

02. december 2008 - 02:18 #2

<ole>

roenving >> jeg er hamrende træt, så jeg orker ikke lige nu, men ellers kunne man jo lægge rækkerne i to tbodies - og vise/skjule dem i stedet =)

/mvh
</bole>

Synes godt om

ravnborg Nybegynder

02. december 2008 - 12:49 #3

Det virker fint.
Opret bare et svar.

Kan man lave scriptet, så det kan vis/skjule flere tabeller end "minTabel"?

Synes godt om

roenving Novice

07. december 2008 - 10:03 #4

>>ole

Jepz, det kunne være en idé ...

Flere tabeller, tjah, sagtens, hvordan forestiller du dig det skulle være ?-)

Synes godt om

ravnborg Nybegynder

22. december 2008 - 19:09 #5

>>roenving
Du har besvaret spørgsmålet, så opret bare et svar.

Hvis det ligger lige til højrebenet, kan man så kalde scriptet med showHideTrs(NavnPåTabel); Så man kan bruge det på flere tabeller.
Du skal ikke til at lave scriptet om, jeg er bare nysgerrig ;-)

Tak for hjælpen

Synes godt om

roenving Novice

24. december 2008 - 21:15 #6

Lige til højrebenet, ja, men så kommer der mange andre spørgsmål ind, hvor mange rækker osv.

F.eks.

<script language="javascript" type="text/javascript">
var hideTrs = true;
function showHideTrs(tblId){
var tbl = document.getElementById(tblId);
...

-- els velbekomme '-)

Synes godt om

roenving Novice

24. december 2008 - 21:18 #7

Hrm, måske lidt mere udbygget, fordi skjul/vis tingen er forbundet med en variabel:

<script language="javascript" type="text/javascript">
var hideTrs = [];
function showHideTrs(tblId){
var tbl = document.getElementById(tblId);
var trs = tbl.getElementsByTagName("tr");
for(var i = 5; i < 10; i++){
trs[i].style.display = hideTrs[tblId] ? "none" : "";
}
hideTrs[tblId] = !hideTrs[tblId];
}
</script>

-- absolut utestet !-)

Synes godt om

roenving Novice

28. december 2008 - 14:06 #8

-- og tak for point ;~}

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS