Søg
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
Kig evt. også på eksempler m.v. her:
http://developer.mozilla.org/en/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
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
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 16:04 Canon printer vil ikke udskrive farver Af mort1 i Printere
I går 14:50 Hvilket fabrikat af Mesh systemer virker? Af fkj i Wifi
15/0513:45 AJAX kode -javascript Af Asky i Programmeringsværktøjer
15/0511:50 Vælg indstilling - blå skærm med med flere muligheder for fejlretning Af Uvanga i Windows
14/0523:24 Google sheets beregning udfra dato Af rickiegrayholm i Office & Kontorpakker
White papers
Flere white papers »