Weblap Hová jutunk?

Tábláztban számok keresése

Tömbadatok megjelenítése táblázatban,
általunk kiválasztott, szám vagy számok keresése.
Találtak listázása.


Program az id azonosítókat, sorszámozva helyezi el. 
Az id azonosítók neve:   első    id="eid1"           második   id="eid2"           harmadik   id="eid3"    és így tovább.

Program a class azonosítókhoz, hozzárendeli az elem adatának értékét.
A class azonosítók neve: .eca + adat értéke.
Példák: 
Első td elem adata = 4;   akkor         class="eca4"
Második td elem adata = 8;   akkor     class="eca8"
Harmadik td elem adata = 1;   akkor   class="eca1"

Táblázatban a teszt számok, általunk meghatározott háttérszínnel jelennek meg.

Tömb adatokból, táblázatot JavaScript készíti el,
id és class azonosítókkal.

A kereset számokat, szóközzel válasszuk el egymástól.
Megadható egy, vagy több szám is.

Keresett szám/számok =




Teszt számok class-neve =

Tömbelemek száma =
Elküldött, keresett számok =





Statisztikai lista.

Kiválasztottak begyűjtése, listázása:
Eredeti tömbből,
ismétlődő adatok,
kiszürése.

Létező számok közül.
Minden szám,
csak egyszer szerepel.


Vissza a lap elejére


Fenti program leírása.

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Begyüjtéssel táblázatban szöveg keresése.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.bemtabla{width:99.5%; background-color: #ffc;}
.bemtabla th{font-size:16px;}
.bemtabla td{font-size:15px; vertical-align:top; padding-left: 2px;}
.szovegminta{width: 350px; margin-left: 20px; background-color: white;}
.szovegminta td{font-weight:normal; font-size: 15px;}
#rejtve{display:none;}
</style>
</head>

<body>
             <h1>Táblázatban számok keresése, begyűjtéssel.</h1>
<!-- Űrlap elkészítése. -->

<table class="bemtabla"><tr><td>
    <form name="num" id="num">
         <p>A kereset számokat, szóközzel válasszuk el egymástól.<br>
Megadható egy, vagy több szám is.</p>
         Keresett szám/számok = 
         <input type="text" name="tsz" id="tsz" value="1 3" size="30"><br><br> 
         <input type="button" value="Keresés indítása!" onClick="SzamokFunction(num.tsz.value)">
         <input type="reset" name="reset" value="Beírt adat törlése">
    </form>
<br>
</td>
</tr></table>
<br>
<style id="stilusok"></style>
<p id="rejtve">Teszt számok class-neve = <span id="szclassneve"></span></p>
<p><b>Tömbelemek száma = <span id="elemszam"></span><br>
Elküldött, keresett számok = <span id="vszamok"></span></b></p>

<table class="bemtabla"><tr><td><br>
<script> 
function SzamokFunction(tszamok){
		 var vszamok=tszamok;
	                 document.getElementById("vszamok").innerHTML = vszamok; // Keresett, választott számok.
		 var darabolt=vszamok.split(" ");
		 var daraboltakh=darabolt.length;
                     document.getElementById("stilusok").innerHTML="";
		             document.getElementById("szclassneve").innerHTML="";
					 
		  // Stílusok meghatározása. --------------------------------------
		  for(i=0; i<daraboltakh; i++){
		     var szam = darabolt[i]
             var classnev='.eca'+szam; var silusforma='{background-color: aqua;}';
		    var stilus=classnev+silusforma;
                document.getElementById("stilusok").innerHTML+=stilus;
				    var infoclassnev=classnev+' ';
	            document.getElementById("szclassneve").innerHTML+=infoclassnev;
		  }
}
    // Számokat tartalmazó tömb.
const sztt=[
1,2,3,4,5,7,8,9,10,11,12,9,1,18,2,3,8,2,3,5,6,4,24,8,1,2,3,4,5,7,8,9,10,11,
12,9,1,18,2,3,8,2,3,5,6,4,24,8,3,12,15,1,2,3,4,5,7,8,9,10,11,12,9,1,18,2,3,8,
2,3,5,6,4,24,8,1,2,3,4,5,7,8,9,10,11,12,9,1,18,2,3,8,2,3,5,6,4,24,8,3,12,14,
2,3,5,6,4,24,8,1,2,3,4,5,7,8,9,10,11,12,9,1,18,2,3,8,2,3,5,6,4,24,8,3,12,
];

var sztth=sztt.length;         // Az sztt tömb hossza.
       document.getElementById("elemszam").innerHTML=sztth;

	  document.write('<table class="minta">');
var ti = 1;            // Az id sorszámozója.
var s=0;               // Tömbelemek indexénak azonosítása.
var cel=sztth/5;   // hossz / 5  tr cellasor lesz, mert egy cellasorban 5 db. td cella lesz

for(i=0; i<cel; i++) {          
    document.write('<tr>');
	  
         for(c=0; c < 5; c++) {                   // Egy sorben 5 td elem, azaz, cella lesz.
		       var dat=sztt[s];
            if(dat!=undefined){			 
               var eid="eid"+ti;                     // A td jelölőelem, id azonosítója.
               var eca="eca"+dat;                // A td jelölőelem, class azonosítója.	 
		       document.write('<td id='+eid+' class='+eca+'>'+dat+'</td>');    
		       ti++;  s++;
            }
            else {var dat=""; document.write('<td>'+dat+'</td>'); }
         }   
    document.write('</tr>');	  
}	
	document.write('</table>');	
</script>
<br><br></td>
<td><br>Statisztikai lista.<br>
     <p>Kiválasztottak begyűjtése, listázása:</p>
     <button id="btnlista"><b>Űrlapról keresés idítása után:<br>Beazonosítottak listázása.<br>Katt ide.</b></button> 
	 <p><span id="tcszdb"></span></p>
</td>

<td><br>Eredeti tömbből,<br> ismétlődő adatok,<br> kiszürése.<br><br>
     <button id="btnrendez"><b>Adatok rendezése:<br>Ismétlődők kiszűrésével.<br>Katt ide.</b></button>
	 <p id="tombrendezve"></p>
</td>
</tr>
</table>

<script type="text/javascript">
   $(document).ready(function(){
	 
        $("#btnlista").click(function(){
					 document.getElementById("tcszdb").innerHTML=" ";
                var Otclnev="";	    // Összes tesztszámhoz tartozó, class-nevek.
                var Otclnev=document.getElementById("szclassneve").innerHTML;  // class_nevek lekérdezése.
                var Otclnevh=Otclnev.length; 					  				 
                var Otcdarabolt=Otclnev.split(" ");
                var Otcdarabolth=Otcdarabolt.length;
                var clnev="";
			
             for(i=0; i<Otcdarabolth; i++){
                     var clnev=Otcdarabolt[i];
                        if(clnev!=""){
                              var tcsz=$(clnev);          var tcszh=tcsz.length;
                              var clstrh=clnev.length;  var clstrsz=clnev.substring(4,clstrh);
                                    if(clstrsz>0){
                                           var tadat ='keresett = '+clstrsz+'; Ebből '+tcszh+' db. van.<br>';
                                                 document.getElementById("tcszdb").innerHTML+=tadat;
                                     }
                       }
               }

        });

        $("#btnrendez").click(function(){
	        // -- Rendezés kezdete. --- Ismétlődők kiszűrése.  ------------------
                     var Rxy = new Array();       // Rxy tömbbe, rendezés előkészítése.
                  for(i=0; i < sztth; i++) { var adat=sztt[i];   Rxy[adat]=adat; }
                     var tei=0;      // Tömbelem sorszámozó.
                     var rendezett = new Array();        Rxy.forEach(rxyFunction);
                                 function rxyFunction(adat, index) { rendezett[tei]=adat;  tei++; }
               // -- Rendezés vége. ---------------------------------------------------

               // -------- Rendezés eredményének, kiíratása. --------------
                     var rendezve = "";         rendezett.forEach(rendezettFunction);
                              document.getElementById("tombrendezve").innerHTML = rendezve;
                    function rendezettFunction(adat, index) {
                               rendezve += "["+index+ "] = " + adat + "<br>";
                    }
        });
		
   });
</script>


Vissza a lap elejére