Weblap Hová jutunk?

Táblázatban szöveg keresése, begyűjtéssel


Táblázatban szöveg keresése, begyüjtéssel,
keresés a kezdő betű alapján.


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

Program a class azonosítókhoz, hozzárendeli az első string értékét.
A class azonosítók neve: strca +  adat első karakterének kódja.
Példák: 
A td elem adatának első karaktere = A;   akkor     class="strca65"
A td elem adatának első karaktere = B;   akkor     class="strca66"
A td elem adatának első karaktere = Ű;   akkor     class="strca368"

A kereset szöveg kezdő betűje lehet, kis vagy nagybetű. JavaScript megkülömbözteti a kis és nagybetűket.
Példánkban minden szöveg, nagybetűvel kezdődik.

Keresett szöveg, kezdő betűje =


Táblázatot tömb adatokból, JavaScript hozza létre.

Tömbelemek száma =




Kiválasztottak begyűjtése, listázása:


Vissza a lap elejére



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öveg keresése, begyűjtéssel</h1>
		 
<!-- Űrlap elkészítése. -->

<table class="bemtabla"><tr><td>
    <form name="kstr" id="kstr">
         <p>A kereset szöveg, kezdő betűje lehet, kis vagy nagybetű is.</p>
         Keresett szöveg, kezdő betűje = 
         <input type="text" name="x" id="x" value="A" size="5"><br><br> 
         <input type="button" value="Keresés indítása!" onClick="KstrFunction(kstr.x.value)">
         <input type="reset" name="reset" value="Beírt adat törlése">
    </form>
<br>
</td>
</tr></table>

<p><b>Tömbelemek száma =  <span id="strelemszam"></span></b></p>
           <style id="szovegstilusok"></style>
<div id="rejtve"><span id="classneve"></span></div>

<table class="bemtabla"><tr><td> <br>

  
<script> 
        function KstrFunction(a){
                var kbetu=a;
                var cCAt =kbetu.charCodeAt(0);
                var classnev='.strca'+cCAt;         // A td elem szövegének, class azonosítója.
                var silusforma='{ background-color: aqua; }';
                var strstilus=classnev+silusforma;
			  
                    // Stílusok beillesztése, a <style> elembe.
                           document.getElementById("szovegstilusok").innerHTML = strstilus;
			  
                    // classnev beillesztése, a gyüjteménybe.
                           document.getElementById("classneve").innerHTML = classnev;
        }
// ------------- Nyílvántartási tömb létrehozása, elkészítése. ------------------
const szoveg=[
"Rokon: Gabor István Dinnyés Tel:32x-32x",
"Asztalos: Vác Határ út Tel:32x-32x",
"Vendéglő: Hantos Határ út Tel:32x-32x",
"Kertész: Velence Határ út Tel:32x-32x",
"Bádogos: Vál Határ út Tel:32x-32x",
"Cukrász: Lenti Határ út Tel:32x-32x",
"Gázszerelő: Gánt Határ út Tel:32x-32x",
"Asztalos: Győr Határ út Tel:32x-32x",
"Fodrász: Esztergom Határ út Tel:32x-32x",
"Vendéglő: Pákozd Határ út Tel:32x-32x",
"Bádogos: Szeged Határ út Tel:32x-32x",
"Gázszerelő: Egyek Határ út Tel:32x-32x",
"Rokon: Lakatos István Aba  Tel:32x-32x",
"Kertész: Tárnok Határ út Tel:32x-32x",
"Asztalos: Pécs Határ út Tel:32x-32x",
"Fodrász: Érd Határ út Tel:32x-32x",
"Cukrász: Bodajk Határ út Tel:32x-32x",
"Bádogos: Siófok Határ út Tel:32x-32x",
"Kertész: Hatvan Határ út Tel:32x-32x",
"Gázszerelő: Debrecen Határ út Tel:32x-32x",
"Cukrász: Agárd Határ út Tel:32x-32x",
"Vendéglő: Dinnyés Határ út Tel:32x-32x",
"Rokon: Ferenczi István Pest Tel:32x-32x",
"Kertész: Miskolc Határ út Tel:32x-32x",
"Gázszerelő: Füred Határ út Tel:32x-32x",
"Fodrász: Dinnyés Határ út Tel:32x-32x",
];

var szovegh=szoveg.length;  // A szoveg tömb hossza.
                document.getElementById("strelemszam").innerHTML=szovegh;

// ------------- Tömbadatokból táblázat elkészítése. ------------------
    document.write('<table class="szovegminta">');
       var ti = 1;   // Az id sorszámozója.
       var s=0;      // Tömbelemek indexénak azonosítása.

for(i=0; i < szovegh; i++) {                   // szovegh, a tr cellasorok száma.        
    document.write('<tr>');
	  
         for(c=0; c < 1; c++) {                   // Szövegt tartalmazó td elem lesz beazonosítva.
                     var dat=szoveg[s];
            if(dat!=undefined){			 
                var strid="strid"+ti;                      // A td jelölőelem, id azonosítója.
                var cCAt =dat.charCodeAt(0);    // A td jelölőelem, class azonosítója.
                var strca ="strca"+cCAt;
		       document.write('<td>'+i+'</td><td id='+strid+' class='+strca+'>'+dat+'</td>');    
		       ti++;  s++;
            }
            else {var dat=""; document.write('<td>'+dat+'</td>'); }
         }
		   
      document.write('</tr>');	  
}	
      document.write('</table>');	
	
</script>

<br><br> </td>
<td>
     <p>Kiválasztottak begyűjtése, listázása:</p>
     <button id="btnlista"><b>Beazonosítottak listázásához.<br>Katt ide.</b></button>
     <p><span id="beazonositottak"></span><br></p>
</td>
</tr>
</table>

<script> type="text/javascript">
   $(document).ready(function(){
	 
        $("#btnlista").click(function(){
                document.getElementById("beazonositottak").innerHTML="";    // Kezdetkor, meglélvő tartalom törlése.
            var clnev="";	
            var clnev=document.getElementById("classneve").innerHTML;
                    var talalt=$(clnev);
                    var talalth=talalt.length;
					   
                  if(clnev!=""){
                            for(i=0; i<talalth; i++){
                                  var xertek=$(clnev+":eq("+i+")").html();
                                  var adat=i+'. '+xertek+'<br>';					
                                document.getElementById("beazonositottak").innerHTML+=adat;
                            }
                   }
                  else { var adat="Űrlapadat, nincs elküldve.";
                         document.getElementById("beazonositottak").innerHTML=adat;  }
				
        });	
   });
</script>

</body>
</html>






Vissza a lap elejére