Søg
Avatar billede bjarke-b Nybegynder
04. december 2003 - 22:01 Der er 19 kommentarer og
1 løsning

Vis / skjul table ved klik

Jeg har en table med noget info.....lad os isge

<table>
<tr>
  <td>tabel1</td>
  <td>Skjul</td>
</tr>

<tr>
  <td colspan="2">bla bla lbl</td>
</tr>
</table>

Når der klikkes på skjul skal den fjerne den nederste <tr> og erstatte skjul med et vis og når der klikkes på vis skal den komme frem igen og vis skal skifte til skjul

Nogen der kan hjælpe?
Avatar billede bernhof Nybegynder
04. december 2003 - 22:22 #1
Prøv følgende:

<table>
  <tr>
    <td>tabel1</td>
    <td><input type="button" onclick="if(myTR.style.display != 'none'){myTR.style.display = 'none';this.value = 'Vis'}else{myTR.style.display = ''; this.value = 'Skjul'}" value="Skjul"></td>
  </tr>
  <tr id="myTR">
    <td colspan="2">Skjul/vis denne</td>
  </tr>
</table>
Avatar billede bernhof Nybegynder
04. december 2003 - 22:26 #2
Du kunne også lægge scriptet seperat:

<script language="javascript">
function toggleTR(tr,btn) {
  if (tr.style.display != 'none') {
    tr.style.display = 'none';
    btn.value = 'Vis' }
   
  else {
    tr.style.display = '';
    btn.value = 'Skjul' }
  }
</script>

<table>
  <tr>
    <td>tabel1</td>
    <td><input type="button" onclick="toggleTR(myTR,this)" value="Skjul"></td>
  </tr>
  <tr id="myTR">
    <td colspan="2">Skjul/vis denne</td>
  </tr>
</table>
Avatar billede bjarke-b Nybegynder
04. december 2003 - 22:26 #3
kan du lave den til et skjuljpg/vis.jpg billede istedet for tekst?
Avatar billede bernhof Nybegynder
04. december 2003 - 22:30 #4
<script language="javascript">
function toggleTR(tr,img) {
  if (tr.style.display != 'none') {
    tr.style.display = 'none';
    img.src = 'vis.jpg' }
   
  else {
    tr.style.display = '';
    img.src = 'skjul.jpg' }
  }
</script>

<table>
  <tr>
    <td>tabel1</td>
    <td><img src="skjul.jpg" style="cursor: pointer" onclick="toggleTR(myTR,this)"></td>
  </tr>
  <tr id="myTR">
    <td colspan="2">Skjul/vis denne</td>
  </tr>
</table>
Avatar billede bernhof Nybegynder
04. december 2003 - 22:31 #5
Hmm .. tror jeg misforstod dig .. hvad mener du præcist?
Avatar billede bjarke-b Nybegynder
04. december 2003 - 22:34 #6
Jeg omformulerer lige

Hvis jeg har flere tr der skal ind, har prøvet med

<div id="layer1">
<tr>
  <td>kad</td>
</tr>
<tr>
  <td>kad</td>
</tr>
<tr>
  <td>kad</td>
</tr>
<tr>
  <td>kad</td>
</tr>
</div>

Men den gør det ikke, noget der skal ændres?
Avatar billede bernhof Nybegynder
04. december 2003 - 22:35 #7
Skal alle disse tr forsvinde, når du trykker vis/skjul?
Avatar billede bjarke-b Nybegynder
04. december 2003 - 22:35 #8
Jep
Avatar billede bernhof Nybegynder
04. december 2003 - 22:44 #9
Det lader til at det ikke virker, hvis man placerer en <div> midt i tabellen. Så jeg kan desværre ikke hjælpe dig der..

Gør det noget, hvis alle disse tr ligger i en tabel for sig selv? .. altså:

<table>
<tr>
  <td>kad</td>
</tr>
<tr>
  <td>kad</td>
</tr>
<tr>
  <td>kad</td>
</tr>
<tr>
  <td>kad</td>
</tr>
</table>

For så kan vi nøjes med bare at skjule tabellen.
Avatar billede bjarke-b Nybegynder
04. december 2003 - 22:46 #10
Jeg har fået basic koden nu og prøver at rode videre :-) takker
Avatar billede bernhof Nybegynder
04. december 2003 - 22:47 #11
Hehe, ok .. no problem. Tak for points.
Avatar billede roenving Novice
05. december 2003 - 00:45 #12
Bare sådan ?-)

<script type="text/javascript">
    function visSkjul(elm){
        if(elm.innerHTML=='Skjul'){
            elm.innerHTML='Vis';
            document.getElementById('minTr').style.display='none';
        }else{
            elm.innerHTML='Skjul';
            document.getElementById('minTr').style.display='block';
        }
    }
</script>

<table>
<tr>
  <td>tabel1</td>
  <td id="minTd" onclick="visSkjul(this)" style="cursor:pointer;">Skjul</td>
</tr>

<tr id="minTr" style="display:block;">
  <td colspan="2">bla bla lbl</td>
</tr>
</table>
Avatar billede bjarke-b Nybegynder
05. december 2003 - 00:50 #13
Kan du klare en der kan lukke flere <tr> på en gang ? skal nok give 100 point til dig også :-)
Avatar billede mm12010 Nybegynder
05. december 2003 - 02:11 #14
<script type="text/javascript">
    function visSkjul(elm){
        if(elm.innerHTML=='Skjul'){
            elm.innerHTML='Vis';
            document.getElementById('minTr_1').style.display='none';
            document.getElementById('minTr_2').style.display='none';
        }else{
            elm.innerHTML='Skjul';
            document.getElementById('minTr_1').style.display='block';
            document.getElementById('minTr_2').style.display='block';
        }
    }
</script>

<table>
<tr>
  <td>tabel1</td>
  <td id="minTd" onclick="visSkjul(this)" style="cursor:pointer;">Skjul</td>
</tr>
<tr id="minTr_1" style="display:block;">
  <td colspan="2">bla bla lbl<br>1111111</td>
</tr>
<tr id="minTr_2" style="display:block;">
  <td colspan="2">bla bla lbl<br>2222222</td>
</tr>
<tr id="minTr_3" style="display:block;">
  <td colspan="2">bla bla lbl<br>3333333</td>
</tr>
</table>
Avatar billede roenving Novice
05. december 2003 - 02:14 #15
Sådan ?-)

<script type="text/javascript">
    function visSkjul(elm,clss){
        trs = document.getElementsByTagName("TR");
        alert(elm.innerHTML+"\n"+clss+"\n"+trs.length);
        if(elm.innerHTML.indexOf('Skjul')>-1){
            elm.innerHTML='Vis '+clss;
            for(i=0;trs.length>i;i++){
                if(trs[i].className==clss)trs[i].style.display='none';
            }
        }else{
            elm.innerHTML='Skjul '+clss;
            for(i=0;trs.length>i;i++){
                if(trs[i].className==clss)trs[i].style.display='block';
            }
        }
    }
</script>

<table>
<tr>
  <td>tabel1</td>
  <td id="minTd" onclick="visSkjul(this,'trRed')" style="cursor:pointer;border:1px solid black;">Skjul trRed</td>
  <td id="minTd" onclick="visSkjul(this,'trBlue')" style="cursor:pointer;border:1px solid black;">Skjul trBlue</td>
  <td id="minTd" onclick="visSkjul(this,'trGreen')" style="cursor:pointer;border:1px solid black;">Skjul trGreen</td>
  <td id="minTd" onclick="visSkjul(this,'trYellow')" style="cursor:pointer;border:1px solid black;">Skjul trYellow</td>
</tr>

<tr class="trRed" style="display:block;background:red;">
  <td colspan="5">bla bla lbl</td>
</tr>
<tr class="trRed" style="display:block;background:red;">
  <td colspan="5">bla bla lbl</td>
</tr>
<tr class="trBlue" style="display:block;background:blue;">
  <td colspan="5">bla bla lbl</td>
</tr>
<tr class="trBlue" style="display:block;background:blue;">
  <td colspan="5">bla bla lbl</td>
</tr>
<tr class="trGreen" style="display:block;background:green;">
  <td colspan="5">bla bla lbl</td>
</tr>
<tr class="trGreen" style="display:block;background:green;">
  <td colspan="5">bla bla lbl</td>
</tr>
<tr class="trYellow" style="display:block;background:yellow;">
  <td colspan="5">bla bla lbl</td>
</tr>
<tr class="trYellow" style="display:block;background:yellow;">
  <td colspan="5">bla bla lbl</td>
</tr>
<tr class="trYellow" style="display:block;background:yellow;">
  <td colspan="5">bla bla lbl</td>
</tr>
<tr class="trYellow" style="display:block;background:yellow;">
  <td colspan="5">bla bla lbl</td>
</tr>
</table>
Avatar billede bjarke-b Nybegynder
05. december 2003 - 14:59 #16
Super

<td style="border-bottom: 1px solid #000000;" align="right" background="images/b00.jpg"><img src="images/minus.gif" onclick="visSkjul(this,'tr1')" style="cursor:pointer;border:1px solid black;"></td>

Hvad skal rettes i <script> for at den skifter til plus.gif når den trykkes og tilbage når der trykkes osv
Avatar billede roenving Novice
05. december 2003 - 15:25 #17
<script type="text/javascript">
    function visSkjul(elm,clss){
        trs = document.getElementsByTagName("TR");
//        alert(elm.innerHTML+"\n"+clss+"\n"+trs.length);
        if(elm.childNodes[0].src.indexOf('minus')>-1){
            elm.childNodes[0].src = "images/plus.gif";
            for(i=0;trs.length>i;i++){
                if(trs[i].className==clss)trs[i].style.display='none';
            }
        }else{
            elm.childNodes[0].src = "images/minus.gif";
            for(i=0;trs.length>i;i++){
                if(trs[i].className==clss)trs[i].style.display='block';
            }
        }
    }
</script>

<td style="border-bottom: 1px solid #000000;" align="right" background="images/b00.jpg" onclick="visSkjul(this,'tr1')" style="cursor:pointer;border:1px solid black;"><img src="images/minus.gif"></td>
Avatar billede bjarke-b Nybegynder
05. december 2003 - 15:30 #18
Tusind tak
Avatar billede bjarke-b Nybegynder
05. december 2003 - 15:31 #19
http://www.eksperten.dk/spm/436371
Avatar billede roenving Novice
05. december 2003 - 15:52 #20
Velbekomme '-)
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
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.

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 15:01 Samsung smart TV Af postpeter@outlook.dk i Fri debat
I går 14:16 installere windows på separat diskpartition Af Malm i Windows
I går 13:43 Problem med mcafee Af Malm i Andet software
I går 13:39 Er tilstrækkelig antivirus incl på ny Samsung smartphone ? Af annam i Backup- & Antivirus
19/0819:46 Skift fra Microsoft365 til Microsoft 2024 Af 1Dorte i Office & Kontorpakker
White papers
Flere white papers »