W3-SI.com     HTML CSS JavaScript Načrtovanje  
  logotip  
SERŠ Maribor Iskanje Primeri

Izdelava tabele

Koda:
<script type="text/javascript">
   function tabela()
    {
     x=document.all.vrstice.value
//spremenljivka, ki bo dolaloČala število vrstic
     y=document.all.stolpci.value
//spremenljivka, ki bo doloČla število stolpcev
     document.write('<table sumarry="tabela">')
//zaČetek tabele
     for (var i=1; i<=x; i++)
      {
       document.write('<tr>')
//zaČetek vrstice
       for (var j=1; j<=y; j++)
        {
         document.write('<td> * </td>')
//celica
        }
       document.write('</tr>')
//zakljuČek vrstice
      }
     document.write('</table>')
//zakljuČek tabele
    }
  </script>

<form id="obrazec">

<! -po kliku na ta gumb se bo samodejno kreirala tabela ->
<input onclick="tabela()" type="button" value="Nariši" />

<span> : </span>

<! -tukaj si bomo izbrali število vrstic ->
<select id="vrstice">
  <option value="1" selected="selected">1</option>

  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>

  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>

  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>

  </select>
<span> * </span>
<! -tukaj si izberemo število stolpcev ->
<select id="stolpci">
  <option value="1" selected="selected">1</option>

  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>

  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>

  <option value="8">8</option>
  <option value="9">9</option>
  <option   value="10">10</option>

</select>
</pre>
Izgled v
brskalniku:
: *
Razlaga: Scripta s funkcijo tabela() kreira tabelo v kateri imamo dve spremenljivki od katerih bo x določal število vrstic v tabeli, y pa število stolpcev v tabeli. Nato Javascript s pomočjo for zanke kreirati tabelo želenih lastnosti. Za konec ustvarimo še gumb in padajoča seznama s pomočjo sintakse form in select, ki nam podata podatke za kreiranje tabele(). Padajoča seznama vsebujeta vrednosti od 1-10 pri čemer je eden število vrstic in drugi število solpcev v tabeli. Brskalnik nato s klikom na gumb Nariši tabelo v novem oknu samodejno kreira tabelo želenih lastnosti.

SERŠ Maribor : Strokovna gimnazija : 2004 : Davorin Lenart