Avatar billede vsign Nybegynder
16. oktober 2003 - 15:05 Der er 11 kommentarer og
1 løsning

skift for action og tabel row med DOM

Hej Er der nogle som er inde i DOM ?

Jeg har en tabel som indeholder en række med 4 celler og jeg vil gerne kunne skifte den ud med en tabel med en række og 5 celler ved at klikke på et link/en knap i tabellen er der nogle som kan vise mig hvordan dette gøres ?

Sådan her ser de 2 tabeller ud
<table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
<form name="form1" method="post" action="x.asp">
  <tr>
    <td>S&oslash;g</td>
    <td>Skift</td>
    <td><select name="fag">
    </select></td>
    <td><input type="search" name="textfield"></td>
    <td><input type="submit" name="Submit" value="Submit"></td>
    </tr>
</form>
</table>

<table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
<form name="form1" method="post" action="y.asp">
  <tr>
    <td>S&oslash;g</td>
    <td>Skift</td>
    <td>&nbsp;</td>
    <td><input type="search" name="textfield"></td>
    <td><input type="submit" name="Submit" value="Submit"></td>
    </tr>
</form>
</table>
Avatar billede roenving Novice
16. oktober 2003 - 15:15 #1
Sådan ?-)

<script type="text/javascript">
function skift(id1,id2){
    document.getElementById(id1).style.display='none';
    document.getElementById(id2).style.display='block';
}
</script>
<table width="500" border="1" align="center" cellpadding="0" cellspacing="0" id="tabel1" style="display:block;">
<form name="form1" method="post" action="x.asp">
  <tr>
    <td>S&oslash;g</td>
    <td onclick="skift('tabel1','tabel2')" style="cursor:pointer;">Skift</td>
    <td><select name="fag">
    </select></td>
    <td><input type="search" name="textfield"></td>
    <td><input type="submit" name="Submit" value="Submit"></td>
    </tr>
</form>
</table>

<table width="500" border="1" align="center" cellpadding="0" cellspacing="0" id="tabel2" style="display:none;">
<form name="form1" method="post" action="y.asp">
  <tr>
    <td>S&oslash;g</td>
    <td onclick="skift('tabel2','tabel1')" style="cursor:pointer;">Skift</td>
    <td>&nbsp;</td>
    <td><input type="search" name="textfield"></td>
    <td><input type="submit" name="Submit" value="Submit"></td>
    </tr>
</form>
</table>
Avatar billede mr.meincke Nybegynder
16. oktober 2003 - 15:27 #2
<html>
<head>
  <title>test</title>
  <script>
  function Switch() {
    if (document.all["soeg2"].style.display == "none") {
        alert('2');
        document.all["soeg1"].style.display = "none";
        document.all["soeg2"].style.display = "inline";
        return false;
    } else {
        alert('1');
        document.all["soeg1"].style.display = "inline";
        document.all["soeg2"].style.display = "none";
        return false;
    }
  }
  </script>

<body onload="Switch();">

<div id="soeg1" style="display: none;">
<table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>S&oslash;g</td>
    <td onclick="skift('tabel1','tabel2')" style="cursor:pointer;">Skift</td>
    <td><select name="fag">
    </select></td>
    <td><input type="search" name="textfield"></td>
    <td><input type="submit" name="Submit" value="Submit" onclick="Switch();"></td>
    </tr>
</table>

</div>

<div id="soeg2" style="display: inline;">
<table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>S&oslash;g</td>
    <td onclick="skift('tabel2','tabel1')" style="cursor:pointer;">Skift</td>
    <td>&nbsp;</td>
    <td><input type="search" name="textfield"></td>
    <td><input type="submit" name="Submit" value="Submit" onclick="Switch();"></td>
    </tr>
</table>
</div>

</body>
</html>
Avatar billede mr.meincke Nybegynder
16. oktober 2003 - 15:28 #3
Du skal selvfølgelig lige fjerne alert('#'); :)
Avatar billede mr.meincke Nybegynder
16. oktober 2003 - 15:30 #4
og så de andre tags lavet af roenving .. Jeg stjal lige tabellerne fra ham ;)
Avatar billede roenving Novice
16. oktober 2003 - 15:32 #5
>>mr.meincke

-- dit brug af document.all gør selvfølgelig at det virker i IE4, men fjerner alt som ligner browser-kompatibilitet, da ingen andre (udover vist Opera) understøtter den slags metoder ...

-- ved at bruge document.getElementById opnår jeg at det virker i stort set alle moderne browsere (hvortil jeg ikke regner IE4 !-)

-- og derudover udmærker din sig vist kun ved at kræve ekstra elementer, teknikken er den samme !-)
Avatar billede mr.meincke Nybegynder
16. oktober 2003 - 15:33 #6
Lol sry havde ikke set der stod skift i en td... Roenving skal ha points! :o)
Avatar billede mr.meincke Nybegynder
16. oktober 2003 - 15:34 #7
Roenving >> Hehe, i know ... Sagde også du skulle ha points? Havde fuldstændig misforstået det spørgsmål...
Avatar billede vsign Nybegynder
16. oktober 2003 - 15:44 #8
Roenvings virker til mit behov så hvis du vil have disse point så lav lige et svar eller siger jeg mange tak for hjælpen

/vsign
Avatar billede roenving Novice
16. oktober 2003 - 15:45 #9
Velbekomme '-)
Avatar billede roenving Novice
16. oktober 2003 - 15:57 #10
-- og tak for points ;~}
Avatar billede vsign Nybegynder
16. oktober 2003 - 16:15 #11
Selv tak - jeg savner en grundig introduktion til DOM for jeg ved det kan hjælpe mig meget i min kodning, men alt for ofte tyr man til workarounds i stedet for at få det lært. Så kender du nogle gode sites der på en pædagogisk god måde forklarer hvordan man arbejder med DOM så vil det være for fedt

/Peter
Avatar billede roenving Novice
16. oktober 2003 - 16:26 #12
www.html.dk har de en css-tutorial og det jeg har set af den virker helt fornuftigt !-)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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