Avatar billede okidoky Nybegynder
06. september 2006 - 22:11 Der er 9 kommentarer og
1 løsning

Tabel i javascript

Hej

Hvordan laver jeg en tabel med javascript?
og hvordan vælger jeg height og width på tabel og height og width på kolonen
Avatar billede gider_ikke_mere Nybegynder
06. september 2006 - 23:57 #1
Hvorfor i javascript? Hvad er ideen med projektet?
Avatar billede mclemens Nybegynder
07. september 2006 - 01:16 #2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){
  tb=document.createElement("table");
  tb.setAttribute("width","200");
  tb.setAttribute("height","200");
  tbody=document.createElement("tbody");
    tbtr=document.createElement("tr");
    tbtd=document.createElement("td");
    tbtd.setAttribute("width","200");
    tbtd.setAttribute("height","200");
    tbtd.style.background="#ccc";
      tbtdtxt=document.createTextNode("Test");
    tbtd.appendChild(tbtdtxt);
    tbtr.appendChild(tbtd);
  tbody.appendChild(tbtr);
  tb.appendChild(tbody);
document.body.appendChild(tb);
}
</script>

</head><body>

</body></html>





eller:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){
  tb=document.createElement("table");
  tb.style.width="200px";
  tb.style.height="200px";
  tbody=document.createElement("tbody");
    tbtr=document.createElement("tr");
    tbtd=document.createElement("td");
    tbtd.style.width="200px";
    tbtd.style.height="200px";
    tbtd.style.background="#ccc";
      tbtdtxt=document.createTextNode("Test");
    tbtd.appendChild(tbtdtxt);
    tbtr.appendChild(tbtd);
  tbody.appendChild(tbtr);
  tb.appendChild(tbody);
document.body.appendChild(tb);
}
</script>

</head><body>

</body></html>
Avatar billede mclemens Nybegynder
07. september 2006 - 01:17 #3
Avatar billede okidoky Nybegynder
07. september 2006 - 10:40 #4
hvordan kan jeg vælge hvor mange td og tr jeg vil have ?
Avatar billede mclemens Nybegynder
07. september 2006 - 18:34 #5
Sådan her?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){
  tb=document.createElement("table");
  tb.style.width="200px";
  tb.style.height="200px";
    tbody=document.createElement("tbody");



      tbtr=document.createElement("tr");

        tbtd=document.createElement("td");
        tbtd.style.background="#ccc";
          tbtdtxt=document.createTextNode("Test a");
          tbtd.appendChild(tbtdtxt);
        tbtr.appendChild(tbtd);

        tbtd=document.createElement("td");
        tbtd.style.background="#ccc";
          tbtdtxt=document.createTextNode("Test b");
          tbtd.appendChild(tbtdtxt);
        tbtr.appendChild(tbtd);

        tbtd=document.createElement("td");
        tbtd.style.background="#ccc";
          tbtdtxt=document.createTextNode("Test c");
          tbtd.appendChild(tbtdtxt);
        tbtr.appendChild(tbtd);

      tbody.appendChild(tbtr);




      tbtr=document.createElement("tr");

        tbtd=document.createElement("td");
        tbtd.style.background="#ccc";
          tbtdtxt=document.createTextNode("Test a 2");
          tbtd.appendChild(tbtdtxt);
        tbtr.appendChild(tbtd);

        tbtd=document.createElement("td");
        tbtd.style.background="#ccc";
          tbtdtxt=document.createTextNode("Test b 2");
          tbtd.appendChild(tbtdtxt);
        tbtr.appendChild(tbtd);

        tbtd=document.createElement("td");
        tbtd.style.background="#ccc";
          tbtdtxt=document.createTextNode("Test c 2");
          tbtd.appendChild(tbtdtxt);
        tbtr.appendChild(tbtd);

      tbody.appendChild(tbtr);



    tb.appendChild(tbody);
  document.body.appendChild(tb);
}
</script>

</head><body>

</body></html>
Avatar billede mclemens Nybegynder
07. september 2006 - 18:38 #6
Hvis du istedet mente eksempel nr. 1 i http://developer.mozilla.org/en/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces så kan du pille ved for løkkerne eller opbygge et array eller object med elementer / properties som du sætter et script til at gennemløbe ... men dynamiske tabeller er ikke det sjoveste ...

Se f.eks. dette i IE vs. Firefox:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){
  tb=document.createElement("table");
  tb.style.width="200px";
  tb.style.height="200px";
    tbody=document.createElement("tbody");



      tbtr=document.createElement("tr");

        tbtd=document.createElement("td");
        tbtd.style.background="#ccc";
          tbtdtxt=document.createTextNode("Test a");
          tbtd.appendChild(tbtdtxt);
        tbtr.appendChild(tbtd);

        tbtd=document.createElement("td");
        tbtd.style.background="#ccc";
          tbtdtxt=document.createTextNode("Test b");
          tbtd.appendChild(tbtdtxt);
        tbtr.appendChild(tbtd);

        tbtd=document.createElement("td");
        tbtd.style.background="#ccc";
          tbtdtxt=document.createTextNode("Test c");
          tbtd.appendChild(tbtdtxt);
        tbtr.appendChild(tbtd);

      tbody.appendChild(tbtr);




      tbtr=document.createElement("tr");

        tbtd=document.createElement("td");
        tbtd.style.background="#ccc";
        tbtd.setAttribute("colspan","3");
          tbtdtxt=document.createTextNode("Test colspan");
          tbtd.appendChild(tbtdtxt);
        tbtr.appendChild(tbtd);

      tbody.appendChild(tbtr);



    tb.appendChild(tbody);
  document.body.appendChild(tb);
}
</script>

</head><body>

</body></html>
Avatar billede okidoky Nybegynder
07. september 2006 - 21:32 #7
hel ærlig, jeg har tænkt mig at lave en table med 100x100 rækker og koloner? :)

????
Avatar billede mclemens Nybegynder
07. september 2006 - 22:00 #8
Værsgo, så kan du arbejde videre på den:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
if(window.addEventListener)window.addEventListener("load", function(){wload();}, false);
else if(window.attachEvent)window.attachEvent("onload", function(){wload();});

function wload(){
  tb=document.createElement("table");
  tb.style.width="5000px";
  tb.style.height="5000px";
    tbody=document.createElement("tbody");

      for(i=0;i<100;i++){
        tbtr=document.createElement("tr");

          for(j=0;j<100;j++){

            tbtd=document.createElement("td");
            tbtd.style.width="50px";
            tbtd.style.height="50px";
              tbtdtxt=document.createTextNode(j+i*100+1);
              tbtd.appendChild(tbtdtxt);

            tbtr.appendChild(tbtd);

          }

        tbody.appendChild(tbtr);

      }

  tb.appendChild(tbody);
document.body.appendChild(tb);
}
</script>

</head><body>

</body></html>
Avatar billede okidoky Nybegynder
07. september 2006 - 22:06 #9
tak skal du ha :)
Avatar billede mclemens Nybegynder
07. september 2006 - 22:18 #10
Velbekom, 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
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