Weblap Hová jutunk?

Táblázat készítése for ciklussal. 740




1-ik példa.

<table class="xtabla">
<script   language="JavaScript"  type="text/javascript">
var sorokszama=5;
var cellasor=1;
for (i=0; i<sorokszama; i++){
     document.write ('<tr><td>'+cellasor+'-sor.</td>');
     document.write ('<tr><td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td></tr>');
       cellasor++;
 }
</script>  
</table>

Fenti program eredményei:



2-ik példa.

Táblázat feltöltése, változók értékével.

<table class="xtabla">
<script   language="JavaScript"  type="text/javascript">
var sorokszama=5;
for (i=0; i<sorokszama; i++){
    var a=i+1;
    var b=i+2;
    var c=i+3;
    var d=i+4;
    var e=i+5;
	 document.write ('<tr><td>'+a+'</td> <td>'+b+'</td> <td>'+c+'</td> <td>'+d+'</td> <td>'+e+'</td></tr>');
 }
</script>  
</table>

Fenti program eredményei:



3-ik példa.

Táblázat feltöltése, tömbelemek értékével.

<table class="xtabla">
<script   language="JavaScript"  type="text/javascript">
  var xtomb = new Array();         // Tömb létrehozása.
xtomb[0] = "1 2 3 4 5";
xtomb[1] = "6 7 8 9 10";
xtomb[2] = "11 12 13 14 15";
xtomb[3] = "16 17 18 19 20";
xtomb[4] = "21 22 23 24 25";

var xtombhossza=xtomb.length;      // Tömbelemek száma.

for (i=0; i<xtombhossza; i++){
    var xadat=xtomb[i];
	 document.write ('<tr><td>'+i+'</td> <td>'+xadat+'</td></tr>');
 }
</script>  
</table>

Fenti program eredményei:



4-ik példa.

Táblázat feltöltése, tömbelemek darabolt értékeivel.
Minden elem 5db adatot tartalmaz, szóközzel elválasztva.

<table class="xtabla">
<script   language="JavaScript"  type="text/javascript">
  var xtomb = new Array();         // Tömb létrehozása.
xtomb[0] = "1 2 3 4 5";
xtomb[1] = "6 7 8 9 10";
xtomb[2] = "11 12 13 14 15";
xtomb[3] = "16 17 18 19 20";
xtomb[4] = "21 22 23 24 25";

darabok0=xtomb[0].split(" ");        // xtomb[0] Feldarabolása részekre, és tárolásuk a "darabok0" nevű tömbben.
darabok1=xtomb[1].split(" ");        // xtomb[1] Feldarabolása
darabok2=xtomb[2].split(" ");        // xtomb[2] Feldarabolása
darabok3=xtomb[3].split(" ");        // xtomb[3] Feldarabolása
darabok4=xtomb[4].split(" ");        // xtomb[4] Feldarabolása

var darabok0hossza=darabok0.length;

for (i=0; i<darabok0hossza; i++){

    if(i==0){ var adat0=darabok0[0]; var adat1=darabok0[1]; var adat2=darabok0[2]; var adat3=darabok0[3]; var adat4=darabok0[4];}
    if(i==1){ var adat0=darabok1[0]; var adat1=darabok1[1]; var adat2=darabok1[2]; var adat3=darabok1[3]; var adat4=darabok1[4];}
    if(i==2){ var adat0=darabok2[0]; var adat1=darabok2[1]; var adat2=darabok2[2]; var adat3=darabok2[3]; var adat4=darabok2[4];}
    if(i==3){ var adat0=darabok3[0]; var adat1=darabok3[1]; var adat2=darabok3[2]; var adat3=darabok3[3]; var adat4=darabok3[4];}
    if(i==4){ var adat0=darabok4[0]; var adat1=darabok4[1]; var adat2=darabok4[2]; var adat3=darabok4[3]; var adat4=darabok4[4];}
	
  document.write ('<tr><td>'+i+' =</td><td>'+adat0+'</td><td>'+adat1+'</td><td>'+adat2+'</td><td>'+adat3+'</td><td>'+adat4+'</td></tr>');
 }
</script>  
</table>

Fenti program eredményei:



5-ik példa.

Táblázat feltöltése, html oldalon megírt adatsor beolvasával.
Példánkban minden cellasor, 5db adatot fog tartalmazni.

Teszt: Az ötöslottó számait 6 héten át, egy sorba gyűjtöttük. (Gyűjthetünk több heti sorsolási-számokat is.)
Programunk a meglévő adatokból készít táblázatot úgy, hogy egy sorban egy heti sorsolási-számok szerepelnek.

<p>Eredeti html szövegsor tartalma: (Számokat, egy szóközzel elválasztva írjuk be.)<br>
<span id="soradat">29 75 80 83 88 1 33 39 52 88 6 13 51 56 59 3 14 19 34 42 10 34 55 56 57 24 25 34 56 58</span>
</p>


<script   language="JavaScript"  type="text/javascript">
    
   var soradatok=document.getElementById('soradat').innerHTML;
          document.write("Lekérdezett szövegsor tartalma:<br> " +soradatok);   // Ez a kiíratás nem fontos, teszt ellenőrzés.
                // A soradatot, daraboljuk minden szóköznél.
   var adatok=soradatok.split(" ");        // Feldaraboltak, az adatok nevű tömbbe kerülnek.
   var adatokszama=adatok.length;
          document.write('<br>Adatok száma: '+adatokszama+'<br>');    // Kiíratás nem fontos, teszt ellenőrzés.
	
          document.write('<br>Feldarabolás után, az adatok nevű tömbelemek tartalma:<br> '+adatok+'<br>');  // Kiíratás nem fontos, teszt ellenőrzés.
          document.write('<hr><br>');
		  
              // Meghatározzuk a célt, azaz, a for ciklus lefutásának számát.
              // Az osztó értéke, egyenlő legyen az egy sorban kiíratandó adatok számával.(Példánkban 5 db.)
              // A cél értékének, maradék nélküli egész számnak kell lennie.
   var cel=adatokszama/5;
                      document.write('Cél = sorok száma '+cel+'<br>');   // Ez a kiíratás nem fontos, teszt ellenőrzés.

document.write('<table class="xtabla">');	
   var x=0;
   var sor=1;
   for (i=0; i<cel; i++){
               // Annyi változó kell, amennyi adatot egy sorban kiíratunk. (Példánkban 5 db.)
        var ai=x;   var bi=x+1;   var ci=x+2;   var di=x+3;   var ei=x+4;
		
     document.write('<tr><td>'+sor+'-sor.</td>');
	 // 5 darab <td>.......</td> cellába íratjuk az sorsolási adatokat.
     document.write('<td>'+adatok[ai]+'</td><td>'+adatok[bi]+'</td><td>'+adatok[ci]+'</td><td>'+adatok[di]+'</td><td>'+adatok[ei]+'</td></tr>');
	 
    var x=ei+1;
          sor++;
   }

document.write('</table> <hr><br>');

// ----------------- Adatok kiíratása forditva. -------------------------------------------------------------
var fadatok = adatok.reverse();  // Adatok megfordítása.
     document.write('<br>Adatok megfordítása, fadatok nevű tömb, elemeinek tartalma:<br> '+fadatok);  // Teszt kiíratás.
     document.write('<br><br>');
	
document.write('<table class="xtabla">');	
     var x=0;	
     var sor=cel;
   for(i=0; i<cel; i++){
	    var ai=x; var bi=x+1; var ci=x+2; var di=x+3; var ei=x+4;
    document.write('<tr><td>'+sor+'-sor.</td>');
    document.write('<td>'+fadatok[ei]+'</td><td>'+fadatok[di]+'</td><td>'+fadatok[ci]+'</td><td>'+fadatok[bi]+'</td><td>'+fadatok[ai]+'</td></tr>');
          var x=ei+1;
               sor--;
   }

document.write('</table> <hr><br>');

</script> 

Fenti program eredményei:

Eredeti html szövegsor tartalma:
29 75 80 83 88 1 33 39 52 88 6 13 51 56 59 3 14 19 34 42 10 34 55 56 57 24 25 34 56 58