Søg
Avatar billede 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.
Avatar billede 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>
Avatar billede 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>
Avatar billede 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"?
Avatar billede 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 ?-)
Avatar billede 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
Avatar billede 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 '-)
Avatar billede 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 !-)
Avatar billede roenving Novice
28. december 2008 - 14:06 #8
-- og tak for point ;~}
Avatar billede 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.

Loading billede Opret Preview
Kategori
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
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
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 17:35 Kan ikke resette PC med Windows 8.1 Af TTA i Office & Kontorpakker
I går 13:33 Lukning af Microsoftkonto Af ErikHg i Windows
23/0416:10 Bat file. Af johnnylassen i Andet programmering
23/0410:28 “Signe” Svindel omtalt i medier Af nu_igen i Mobiltelefoner
22/0420:59 RAID controller virker ikke ved tilslutning af alle 4 harddiske Af Strawberry i Andet hardware
White papers
Flere white papers »