JavaScript tömbelemek feltöltése HTML oldalról. Kiíratás táblázatban innerhtml beolvasással.

1. Példa.

Táblázat megjelenítés kezdő lépései, innerHTML meghatározással.

<style>
.xtabla {margin-right: auto; margin-left: auto; }
.xtabla td {font-size:12px; font-weight: bold; padding-left: 5px; padding-right: 5px;}
</style>

<!-- HTML oldalon elhelyezünk egy table elemet egyedi id azonosítóval.  -->
     <table id="teszt" class="xtabla"> </table>
	 
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  -->

<script language="JavaScript"  type="text/javascript">
        var tablazat=document.getElementById('teszt');    // HTML oldali táblázat, beazonosítása.
               var tneve='<caption>Tálázat</caption>';            // Táblázat elnevezése.
     tablazat.innerHTML+=tneve;
 
   var cel=4;          // A cél értéke határozza meg, cellasorok számát.
   for(i=0; i<cel; i++){
      var s=i+1;           // Cellasorok sorszámának meghatározása.
	  // Annyi <td> </td> elemet írunk be, amennyi cellaoszlopra szükségünk van.
      var cellasor='<tr>   <td>'+s+'</td>      <td>-</td>      <td>-</td>      <td>-</td>      <td>-</td>  </tr>';
      tablazat.innerHTML+=cellasor;
   }  
</script>

Fenti program eredménye.

2. Példa.

Létező tömb adatait, táblázatba íratjuk ki.
Az innerHTML meghatározással.

- Teszteléshez minden tömbelem, 5 darab adatot tartalmazzon.
- 5-nél kevesebb adatot írunk be, akkor üres cella jelenik meg.
- 5-nél több adatot vagy több szóközt írunk be, akkor hibajelzést kapunk.
- Tömbadatokat, egy szóközzel elválasztva írjuk be.

<span id="ellenorzes"></span>
<table id="tombadatok" class="xtabla"> </table>

<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  -->

<script language="JavaScript"  type="text/javascript">
                           // Tömbadatokat, egy szóközzel elválasztva írjuk be.
var Tombadat = new Array();
  Tombadat[0]="29 75 80 83 88";
  Tombadat[1]="1 33 39 52 88";
  Tombadat[2]="6 13 51 56 59";
  Tombadat[3]="3 14 19 34 42";

var szelvenyszam=Tombadat.length;         //  A "Tombadat" nevű tömb, elemeinek száma.

	// Kiíratás helyének beazonosítása.
    var tablazat=document.getElementById('tombadatok');	
             var tneve='<caption>Tömb tálázat</caption>';  // Táblázat elnevezése.
	tablazat.innerHTML+=tneve;
 
 for (i=0; i<szelvenyszam; i++){
            var Szadat=Tombadat[i];             // Beolvassuk a tömbadatot.
            var adat=Szadat.split(" ");              // Feldaraboljuk a Tömbadatot minden szóköznél.
            var adatszam=adat.length;
	if(adatszam>5){document.getElementById('ellenorzes').innerHTML=i+". Elemben, 5-nél több adat van.";}
			
      var ad1=""; var ad2=""; var ad3=""; var ad4=""; var ad5="";
            for (x=0; x<adatszam; x++){
                if(x==0){var ad1=adat[x];}     if(x==1){var ad2=adat[x];}    if(x==2){var ad3=adat[x];}
                if(x==3){var ad4=adat[x];}     if(x==4){var ad5=adat[x];}
             }
    var trsor='<tr><td>'+ad1+'</td> <td>'+ad2+'</td> <td>'+ad3+'</td> <td>'+ad4+'</td> <td>'+ad5+'</td></tr>';
        tablazat.innerHTML+=trsor;		
   }	
   
</script>

Fenti program eredménye.

3. Példa.
Tömb feltöltése HTML oldalról beolvasott adatokkal
Megjelenítés és keresés, 5 oszlopos táblázatban.

Az innerHTML meghatározással.
- Tömb feltöltése, HTML oldalról beolvasott adatokkal.
- Tömb adatainak megjelenítése, 5 oszlopos táblázatban.
- Keresendő, azaz, kiválasztott adathoz vagy adatokhoz, stílus <style> meghatározása.
- Keresendő számhoz vagy számokhoz tartozó stílus <style> meghatározást, a <script> elején írjuk meg.

<p>Általunk keresendő, azaz, kiválasztott szám vagy számok, szóközzel elválasztva:<br>
<span id="kivalasztott">1 10 14 55 88 58</span>
</p>

<!-- Stilusok kiíratásának helye.  -->
     <span id="Stilus"></span>

<p>Eredeti html adatsor tartalma:<br>
<span id="szamsor">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 60 61</span>
</p>

<!-- Táblázat adataink, kiíratási helye.  -->
<table id="sztabla" class="xtabla"> </table>

<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  -->

<script language="JavaScript"  type="text/javascript">

    // Keresendő adathoz vagy adatokhoz tartozó stílus <style> meghatározása
        var Jel = new Array();
        var Kvt=document.getElementById('kivalasztott').innerHTML;
        var kvd=Kvt.split(" ");                   // Kiválasztottak feldarabolása.
        var kvdszama=kvd.length;
                for (i=0; i<kvdszama; i++){ var cs='.cian';  var ksz=kvd[i]; 
		            var stilus='<style>'+cs+ksz+'{background-color: aqua;}</style>';
		            document.getElementById('Stilus').innerHTML+=stilus;
                }
	
	
	// Tömb feltöltéséhez,  HTML oldali számsor-adatok, beolvasása.
	var szamsoradatok=document.getElementById('szamsor').innerHTML;
	
		   // A soradatot, daraboljuk minden szóköznél.
	var darabok=szamsoradatok.split(" ");       // Feldaraboltak a darabok nevű tömbbe kerülnek.
	var adatokszama=darabok.length;
		  
var Szelveny = new Array();
		  
var forcel=adatokszama/5;

    var start=0;  var cel=start+5;

   for (i=0; i<forcel; i++){
           var beo=0;               // Beolvasás száma.
               for(x=start; x<cel; x++){
                    if(beo==0){var a=darabok[x];}      if(beo==1){var b=darabok[x];}
                    if(beo==2){var c=darabok[x];}      if(beo==3){var d=darabok[x];}
                    if(beo==4){var e=darabok[x];}
                          beo++;
               }
         var start=start+5;  var cel=start+5;
         var tartalom=a+" "+b+" "+c+" "+d+" "+e;     // Szóközzel összefűzzük a kapott adatokat.
         Szelveny[i]=tartalom;                                // Összefűzött adatokat, a "Szelveny" nevű tömbbe íratjuk.
	  
   }
  
   var szelvenyszam=Szelveny.length;         //  A "Szelveny" nevű tömb, elemeinek száma.	

	// Tábla-adatok kiíratási helyének beazonosítása.
    var sztabla=document.getElementById('sztabla');

    var tneve='<caption>Számtáblázat</caption>';          // Táblázat elnevezése.
	sztabla.innerHTML+=tneve;

	
  for (i=0; i<szelvenyszam; i++){
            var Szadat=Szelveny[i];             // Beolvassuk a szelvényadatot.
            var adat=Szadat.split(" ");        // Feldaraboljuk a szelvényadatot minden szóköznél.
			
        var ad1=adat[0]; var ad2=adat[1]; var ad3=adat[2]; var ad4=adat[3]; var ad5=adat[4];
		if(ad1=="undefined"){ad1="";}
		if(ad2=="undefined"){ad2="";}
		if(ad3=="undefined"){ad3="";}
		if(ad4=="undefined"){ad4="";}
		if(ad5=="undefined"){ad5="";}
		
		// Beolvasott adatokhoz tartozó sorszámozott stilus azonosítót, itt kell meghatározni.	 
			 var stilus1='cian'+ad1;    var st1='class='+stilus1;  
			 var stilus2='cian'+ad2;    var st2='class='+stilus2; 
			 var stilus3='cian'+ad3;    var st3='class='+stilus3;
			 var stilus4='cian'+ad4;    var st4='class='+stilus4;
			 var stilus5='cian'+ad5;    var st5='class='+stilus5;

        var trsor1='<tr><td '+st1+'>'+ad1+'</td> <td '+st2+'>'+ad2+'</td>';
        var trsor2='<td '+st3+'>'+ad3+'</td> <td '+st4+'>'+ad4+'</td> <td '+st5+'>'+ad5+'</td></tr>';
        var cellasor=trsor1+trsor2;
		
        sztabla.innerHTML+=cellasor;		
   }		
</script>

Fenti program eredménye.

Általunk keresendő, azaz, kiválasztott szám vagy számok, szóközzel elválasztva:
1 10 14 55 88 58

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 60 61

Vissza az oldal elejére.

4. Példa.
Tömb feltöltése, HTML oldalról beolvasott adatokkal.
Megjelenítés és keresés, 1; 2; 3; 4; 5; 6; 7; vagy 8
oszlopos táblázatban.

Adatok kezelése innerHTML meghatározással.
- Tömb feltöltése, HTML oldalról beolvasott adatokkal.
- Tömb adatainak megjelenítése, táblázatban.
- Meghatározhatjuk, táblázat oszlopainak számát. 1; 2; 3; 4; 5; 6; 7; vagy 8.
- Keresendő, azaz, kiválasztott adathoz vagy adatokhoz, stílus <style> meghatározása.

Program leírása.

  <!-- A stílust letíltjuk. A nem kivánt szövegsorok is, megjelennek weboldalon.  -->
     <style>.dpnone{display: none;}</style>
 
          <div class="dpnone">

<p>Eredeti html adatsor tartalma, mely szavakat és számokat is tartalmazhat:<br>
<span id="tadatsor">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 60 61</span>
</p>
          <!-- Itt határozzuk meg, oszlopok számát.  -->
<p>Táblázat oszlopainak száma, (lehet 1; 2; 3; 4; 5; 6; 7; vagy 8).<br> 
<b>Legyen: <span id="oszlopokszama">5</span></b>
</p>
             </div>
			 
<p>Általunk keresendő adat vagy adatok, szóközzel elválasztva:<br>
<span id="keresendo">1 10 14 55 88 58</span>
</p>

                             <!-- A keresési stílusok beillesztésének helye.  -->
     <span id="Stilus"></span>

                             <!-- Táblázatban megjelenő adatok, kiíratási helye.  -->
      <table id="Adattabla" class="xtabla"> </table>

<!-- xxxxxxxxxxx  HTML oldali adatok vége.  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  -->


<!-- xxxxxxxxxxx     JavaScript kezdete.     xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  -->

<script language="JavaScript"  type="text/javascript">
      var Oszlopszam=document.getElementById('oszlopokszama').innerHTML;
		var adsz=parseInt(Oszlopszam);     // Táblázat oszlopainak száma: 1 2 3 4 5 6 7 vagy 8
		       if(adsz>8){var adsz=8;}
		  
    // Keresendő adathoz vagy adatokhoz tartozó stílus <style> meghatározása.
        var Kvt=document.getElementById('keresendo').innerHTML;
        var kvd=Kvt.split(" ");                   // Kiválasztottak feldarabolása.
        var kvdszama=kvd.length;
                for (i=0; i<kvdszama; i++){ var cs='.cian';  var ksz=kvd[i]; 
		            var stilus='<style>'+cs+ksz+'{background-color: aqua;}</style>';
		            document.getElementById('Stilus').innerHTML+=stilus;
                }
	
	
	// Tömb feltöltéséhez.  HTML oldalon beírt adatok, beolvasása.
	var beirtadatok=document.getElementById('tadatsor').innerHTML;
	
		   // A soradatot, daraboljuk minden szóköznél.
	var darabok=beirtadatok.split(" ");       // Feldaraboltak a darabok nevű tömbbe kerülnek.
	var adatokszama=darabok.length;
		  
var Szelveny = new Array();
		  
var forcel=adatokszama/adsz;

    var start=0;  var cel=start+adsz;

   for (i=0; i<forcel; i++){
           var beo=0;               // Beolvasás száma.
               for(x=start; x<cel; x++){
                    if(beo==0){var a=darabok[x];}      if(beo==1){var b=darabok[x];}
                    if(beo==2){var c=darabok[x];}      if(beo==3){var d=darabok[x];}
                    if(beo==4){var e=darabok[x];}      if(beo==5){var f=darabok[x];}
					if(beo==6){var g=darabok[x];}      if(beo==7){var h=darabok[x];}
                          beo++;
               }
         var start=start+adsz;  var cel=start+adsz;
		 // Szóközzel összefűzzük a kapott adatokat.
         if(adsz==1){var tartalom=a;}                                            // 1 adat, egy sorban.
         if(adsz==2){var tartalom=a+" "+b;}                                      // 2 adat, egy sorban.
         if(adsz==3){var tartalom=a+" "+b+" "+c;}                                // 3 adat, egy sorban.
         if(adsz==4){var tartalom=a+" "+b+" "+c+" "+d;}                          // 4 adat, egy sorban.
         if(adsz==5){var tartalom=a+" "+b+" "+c+" "+d+" "+e;}                    // 5 adat, egy sorban.
         if(adsz==6){var tartalom=a+" "+b+" "+c+" "+d+" "+e+" "+f;}              // 6 adat, egy sorban.
         if(adsz==7){var tartalom=a+" "+b+" "+c+" "+d+" "+e+" "+f+" "+g;}        // 7 adat, egy sorban.
         if(adsz==8){var tartalom=a+" "+b+" "+c+" "+d+" "+e+" "+f+" "+g+" "+h;}    // 8 adat, egy sorban.
		 
         Szelveny[i]=tartalom;                                // Összefűzött adatokat, a "Szelveny" nevű tömbbe íratjuk.
	  
   }
  
   var szelvenyszam=Szelveny.length;         //  A "Szelveny" nevű tömb, elemeinek száma.	

	// Tábla-adatok kiíratási helyének beazonosítása.
    var Adattabla=document.getElementById('Adattabla');

    var tneve='<caption>Adat táblázat</caption>';          // Táblázat elnevezése.
	Adattabla.innerHTML+=tneve;

	
  for (i=0; i<szelvenyszam; i++){
            var Szadat=Szelveny[i];             // Beolvassuk a szelvényadatot.
            var adat=Szadat.split(" ");        // Feldaraboljuk a szelvényadatot minden szóköznél.
		
      var fdbsz=adat.length;             // Feldaraboltak száma.
		var ad1=""; var ad2=""; var ad3=""; var ad4=""; var ad5=""; var ad6=""; var ad7=""; var ad8=""; 
        if(fdbsz==1){ad1=adat[0];}
        if(fdbsz==2){ad1=adat[0]; ad2=adat[1];}
        if(fdbsz==3){ad1=adat[0]; ad2=adat[1]; ad3=adat[2];}
        if(fdbsz==4){ad1=adat[0]; ad2=adat[1]; ad3=adat[2]; ad4=adat[3];}
        if(fdbsz==5){ad1=adat[0]; ad2=adat[1]; ad3=adat[2]; ad4=adat[3]; ad5=adat[4];}
        if(fdbsz==6){ad1=adat[0]; ad2=adat[1]; ad3=adat[2]; ad4=adat[3]; ad5=adat[4]; ad6=adat[5];}
        if(fdbsz==7){ad1=adat[0]; ad2=adat[1]; ad3=adat[2]; ad4=adat[3]; ad5=adat[4]; ad6=adat[5]; ad7=adat[6];}
        if(fdbsz==8){ad1=adat[0]; ad2=adat[1]; ad3=adat[2]; ad4=adat[3]; ad5=adat[4]; ad6=adat[5]; ad7=adat[6]; ad8=adat[7];}
		
		if(ad1=="undefined"){ad1="";}    if(ad2=="undefined"){ad2="";}
		if(ad3=="undefined"){ad3="";}    if(ad4=="undefined"){ad4="";}
		if(ad5=="undefined"){ad5="";}    if(ad6=="undefined"){ad6="";}
		if(ad7=="undefined"){ad7="";}    if(ad8=="undefined"){ad8="";}
		
		// Beolvasott adatokhoz tartozó sorszámozott stilus azonosítót, itt kell meghatározni.	 
			 var stilus1='cian'+ad1;    var st1='class='+stilus1;  
			 var stilus2='cian'+ad2;    var st2='class='+stilus2; 
			 var stilus3='cian'+ad3;    var st3='class='+stilus3;
			 var stilus4='cian'+ad4;    var st4='class='+stilus4;
			 var stilus5='cian'+ad5;    var st5='class='+stilus5;
			 var stilus6='cian'+ad6;    var st6='class='+stilus6;
			 var stilus7='cian'+ad7;    var st7='class='+stilus7;
			 var stilus8='cian'+ad8;    var st8='class='+stilus8;
			 
        if(fdbsz==1){
          var trsor1='<tr><td '+st1+'>'+ad1+'</td>';
          var trsor2='</tr>';
		}
        if(fdbsz==2){
          var trsor1='<tr><td '+st1+'>'+ad1+'</td>';
          var trsor2='<td '+st2+'>'+ad2+'</td></tr>';
		}
        if(fdbsz==3){
          var trsor1='<tr><td '+st1+'>'+ad1+'</td> <td '+st2+'>'+ad2+'</td>';
          var trsor2='<td '+st3+'>'+ad3+'</td></tr>';
		}
        if(fdbsz==4){
          var trsor1='<tr><td '+st1+'>'+ad1+'</td> <td '+st2+'>'+ad2+'</td> <td '+st3+'>'+ad3+'</td>';
          var trsor2='<td '+st4+'>'+ad4+'</td></tr>';
		}			 
        if(fdbsz==5){
          var trsor1='<tr><td '+st1+'>'+ad1+'</td> <td '+st2+'>'+ad2+'</td> <td '+st3+'>'+ad3+'</td>';
          var trsor2='<td '+st4+'>'+ad4+'</td> <td '+st5+'>'+ad5+'</td></tr>';
		}
        if(fdbsz==6){
          var trsor1='<tr><td '+st1+'>'+ad1+'</td> <td '+st2+'>'+ad2+'</td> <td '+st3+'>'+ad3+'</td>';
          var trsor2='<td '+st4+'>'+ad4+'</td> <td '+st5+'>'+ad5+'</td> <td '+st6+'>'+ad6+'</td></tr>';
		}
        if(fdbsz==7){
          var trsor1='<tr><td '+st1+'>'+ad1+'</td> <td '+st2+'>'+ad2+'</td> <td '+st3+'>'+ad3+'</td>';
          var trsor2='<td '+st4+'>'+ad4+'</td> <td '+st5+'>'+ad5+'</td> <td '+st6+'>'+ad6+'</td> <td '+st7+'>'+ad7+'</td></tr>';
		}
        if(fdbsz==8){
          var trsor1='<tr><td '+st1+'>'+ad1+'</td> <td '+st2+'>'+ad2+'</td> <td '+st3+'>'+ad3+'</td> <td '+st4+'>'+ad4+'</td>';
          var trsor2='<td '+st5+'>'+ad5+'</td> <td '+st6+'>'+ad6+'</td> <td '+st7+'>'+ad7+'</td> <td '+st8+'>'+ad8+'</td></tr>';
		}	
        var cellasor=trsor1+trsor2;
		
        Adattabla.innerHTML+=cellasor;		
   }
   
</script>

A fenti leirás eredménye:

Eredeti html adatsor tartalma, mely szavakat és számokat is tartalmazhat:
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 60 61

Táblázat oszlopainak száma, (lehet 2; 3; 4; 5; 6; 7; vagy 8).
Legyen: 5

Általunk keresendő adat vagy adatok, szóközzel elválasztva:
1 10 14 55 88 58