Vyhledávání v tabulce – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Vyhledávání v tabulce – JavaScript, AJAX, jQuery – Fórum – Programujte.comVyhledávání v tabulce – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.
Kall_Ell0
Návštěvník
24. 11. 2011   #1
-
0
-

Ahoj všem, snažím se udělat vyhledávání v tabulce a nějak se mě to nedaří. Tak se obracím na chytré hlavy tohoto fóra. Mám tabulku se seznamem kontaktů. Je jich tam cca 200 a já bych chtěl vyhledat jenom nějaké kontakty. Mám představu takovou, že když začnu vepisovat něco do inputu, tak se mě bude seznam zmenšovat s každým písmenkem co vepíšu. uvádím kód co jsem dal dohromady, ale nějak mě to nefunguje :-(

<div id='hledat'>Hledat <input id='search' type='text' value=''></div>     
<table id='kontakty' cellspacing='0' rowspacing='0' width='100%'>
         <tr>
            <th>N&aacute;zev:</th>
            <th>Telefon:</th>
            <th>Telefon:</th>
        </tr>
            <tr class='detail' name='25' bgcolor=white onmouseover="this.style.background='ActiveCaption'" onmouseout="this.style.background = 'white'">
               <td align='left'><a class='nahled' href='#'>tmobile</a></td>
               <td align='left'><a class='nahled' href='#'>mesto</a></td>
               <td align='left'><a class='nahled' href='#'>+420123456789</a></td>

            </tr>
            <tr class='detail' name='17' bgcolor=white onmouseover="this.style.background='ActiveCaption'" onmouseout="this.style.background = 'white'">
               <td align='left'><a class='nahled' href='#'>cez</a></td>
               <td align='left'><a class='nahled' href='#'>praha</a></td>
               <td align='left'><a class='nahled' href='#'>+420123456987</a></td>
            </tr>
            <tr class='detail' name='2' bgcolor=white onmouseover="this.style.background='ActiveCaption'" onmouseout="this.style.background = 'white'">

               <td align='left'><a class='nahled' href='#'>skoda a.s.</a></td>
               <td align='left'><a class='nahled' href='#'>Boleslav</a></td>
               <td align='left'><a class='nahled' href='#'>+420987654312</a></td>
            </tr>
	</table>

a tady uvádím jquery kód, co jsem vypotil. Předem uvádím, že jsem začátečník

$(document).ready(function($) {

// pokus o hledani
   function search(){
      var search = $('input#search').val();
   };

   $("#search").keyup(function(){search()});
   
   $("#kontakty tr").each(function(){
      var name = $(this).children("td:first").html();
      if (name.indexOf(search) != -1) {
         $(this).show();
         }
   });
});

ten kód mě háže chybu při každém stisknutí klávesy

"Vlastnost 'charCode' události keyup by neměla být používána. Hodnota je nesmyslná."

Nahlásit jako SPAM
IP: 80.87.189.–
Kall_Ell0
Návštěvník
24. 11. 2011   #2
-
0
-

Hej hola, tak jsem to nakonec vyřešil i bez pomoci tohoto fóra. zde je script pro zájemce   

   $("#search").keyup(function(){search()});
   
   function search() {
      search_text = "";
      search_text = $("#search").val();
      $("#kontakty tr.detail").each(function(){
         var name = $(this).children("td:first").html();
         if (name.indexOf(search_text) != -1) {
            $(this).show();
            }
         else $(this).hide();
      });
   }
Nahlásit jako SPAM
IP: 80.87.189.–
Řešení
Kall_Ell0
Návštěvník
24. 11. 2011   #3
-
0
-
Vyřešeno Nejlepší odpověď

Ještě jsem to trošku upravil a zkrátil 

  $("#search").keyup(function() {
      var search_text = "";
      search_text = $("#search").val();
      $("#kontakty tr.detail").each(function(){
         var name = $(this).children("td:first").html();
         if (name.indexOf(search_text) != -1) {
            $(this).show();
            }
         else $(this).hide();
      });
   });
Nahlásit jako SPAM
IP: 80.87.189.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 9 hostů

Podobná vlákna

Tabulka v tabulce — založil Jakub

Hledání řádku v tabulce — založil QWERTZ

Datový typ v tabulce — založil LiDr

Chybějící data v tabulce — založil Robbie

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý