Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Dynamiczne szukanie + opcja ukryj treść w tabeli

Zaczynasz dopiero swoją przygodę z HTML'em? A może mimo swojego doświadczenia natknąłeś się na jakiś problem? Tutaj na pewno znajdziesz pomoc.

Dynamiczne szukanie + opcja ukryj treść w tabeli

Post 21.07.2019, 20:20:15

Witajcie

Znalazłem dwa skrypty które chciałbym jakoś tak połączyć by oba jednocześnie działały.

1. jest to dynamiczne szukanie w tabeli
2. jest to skrypt pokaż / ukryj zawartość

problem w tym , że kiedy wstawie 2 kod to ten 1 nie pokazuje mi wyniku .




wygląda to tak:

mam bardzo długą tabelkę składającą się z tytułów i wierszy z informacjami - jest tak długa więc wstawiłem kod z szukaniem w niej.

Dlatego, że jest tak długa postanowilem by to bardziej estetycznie wyglądało zostawić tytuły, a zawartość pod każdym z nich ukryć.

Niestety opcja szukaj nie pokazuje to co 2 skrypt ukrył.

Po kliknieciu w tytuł pokazuje się zawartość , kiedy klikniemy drugi raz chowa się.


Szukam rozwiązania i opornie mi to idzie.

Kod: Zaznacz cały

<!--   część kodu (92 główne tytuły) -->



<!--- skrypt który chowa tekst -->
<script>
jQuery(document).ready(function($){
  op = function(obj) {
    $(obj).stop().slideToggle();
    };
});
</script>



<!-- skrypt który szuka słów -->

<script>

var $rows = $('#tabela tr');
$('#szukaj_tabela').keyup(function() {
      
       var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
           reg = RegExp(val, 'i'),
           text;
      
       $rows.show().filter(function() {
           text = $(this).text().replace(/\s+/g, ' ');
           return !reg.test(text);
       }).hide();
   });

</script>







Kod: Zaznacz cały


<!-- zawartość body -->

<center>       



               <input id="szukaj_tabela" type="text" placeholder="tutaj wpisz nazwę której szukasz"></center>

<HR>


<TABLE   id="tabela"   FRAME=VOID CELLSPACING=0 COLS=3 RULES=NONE BORDER=0>
   <COLGROUP><COL WIDTH=424><COL WIDTH=332><COL WIDTH=227></COLGROUP>
   <TBODY>
      <TR>
         <TD STYLE="border-bottom: 1px solid #000000" WIDTH=424 HEIGHT=77 ALIGN=LEFT VALIGN=MIDDLE SDNUM="1045;0;@"><FONT SIZE=6 COLOR="#000000">Nazwa  </FONT></TD>
         <TD STYLE="border-bottom: 1px solid #000000" WIDTH=332 ALIGN=LEFT VALIGN=MIDDLE><FONT SIZE=6><BR></FONT></TD>
         <TD STYLE="border-bottom: 1px solid #000000" WIDTH=227 ALIGN=RIGHT VALIGN=MIDDLE SDNUM="1045;0;#&nbsp;##0,00"><FONT SIZE=6> Moc </FONT></TD>
      </TR>
   </TBODY>
</TABLE>
<!-- **************************TYTUŁ************************************************ -->
<HR>


<HR>

<TABLE FRAME=VOID CELLSPACING=0 COLS=1 RULES=NONE BORDER=0>
   <COLGROUP><COL WIDTH=424></COLGROUP>
   <TBODY>
      <TR >
         <TD    onclick="op('#pokazane1');"   STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" COLSPAN=3 WIDTH=983 HEIGHT=77 ALIGN=CENTER VALIGN=MIDDLE BGCOLOR="#800080"><B><FONT SIZE=6 COLOR="#FFFFFF">Passat b5 </FONT></B></TD>
      </TR>
   </TBODY>
</TABLE>
<!-- *******************************uKRYTA ZAWARTOŚĆ******************************************* -->
<HR>

<TABLE FRAME=VOID CELLSPACING=0 COLS=3 RULES=NONE BORDER=0>
   <COLGROUP><COL WIDTH=424><COL WIDTH=332><COL WIDTH=227></COLGROUP>
   <TBODY>
      <TR id="pokazane1">
         <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" COLSPAN=2 WIDTH=756 HEIGHT=77 ALIGN=LEFT VALIGN=MIDDLE><FONT SIZE=4>rok </FONT></TD>
         <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" WIDTH=227 ALIGN=RIGHT VALIGN=MIDDLE SDVAL="30" SDNUM="1045;0;#&nbsp;##0,00&quot; zł&quot;"><FONT SIZE=4>moc</FONT></TD>
      </TR>
      <TR>
         <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" COLSPAN=2 HEIGHT=77 ALIGN=LEFT VALIGN=MIDDLE><FONT SIZE=4>silnik</FONT></TD>
         <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" ALIGN=RIGHT VALIGN=MIDDLE SDVAL="25" SDNUM="1045;0;#&nbsp;##0,00&quot; zł&quot;"><FONT SIZE=4>rok</FONT></TD>
      </TR>
      <TR>
         <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" COLSPAN=2 HEIGHT=77 ALIGN=LEFT VALIGN=MIDDLE><FONT SIZE=4>rok</FONT></TD>
         <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" ALIGN=RIGHT VALIGN=MIDDLE SDVAL="35" SDNUM="1045;0;#&nbsp;##0,00&quot; zł&quot;"><FONT SIZE=4>silnik</FONT></TD>
      </TR>
      <TR>
         <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" COLSPAN=2 HEIGHT=77 ALIGN=LEFT VALIGN=MIDDLE><FONT SIZE=4>rok </FONT></TD>
         <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" ALIGN=RIGHT VALIGN=MIDDLE SDVAL="15" SDNUM="1045;0;#&nbsp;##0,00&quot; zł&quot;"><FONT SIZE=4>silnik2</FONT></TD>
      </TR>
   </TBODY>
</TABLE>
<!-- ********************************TYTUŁ****************************************** -->
<HR>

<TABLE FRAME=VOID CELLSPACING=0 COLS=1 RULES=NONE BORDER=0>
   <COLGROUP><COL WIDTH=424></COLGROUP>
   <TBODY>
      <TR>
         <TD   onclick="op('#pokazane2');"   STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" COLSPAN=3 WIDTH=983 HEIGHT=77 ALIGN=CENTER VALIGN=MIDDLE BGCOLOR="#800080"><B><FONT SIZE=6 COLOR="#FFFFFF">audi a6</FONT></B></TD>
      </TR>
   </TBODY>
</TABLE>
<!-- ********************************uKRYTA ZAWARTOŚĆ****************************************** -->
<HR>

<TABLE FRAME=VOID CELLSPACING=0 COLS=3 RULES=NONE BORDER=0>
   <COLGROUP><COL WIDTH=424><COL WIDTH=332><COL WIDTH=227></COLGROUP>
   <TBODY>
      <TR   id="pokazane2">
         <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" COLSPAN=2 WIDTH=756 HEIGHT=77 ALIGN=LEFT VALIGN=MIDDLE><FONT SIZE=4></FONT></TD>
         <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" WIDTH=227 ALIGN=RIGHT VALIGN=MIDDLE SDVAL="10" SDNUM="1045;0;#&nbsp;##0,00&quot; zł&quot;"><FONT SIZE=4></FONT></TD>
      </TR>
      <TR>
         <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" COLSPAN=2 HEIGHT=77 ALIGN=LEFT VALIGN=MIDDLE><FONT SIZE=4>rok</FONT></TD>
         <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" ALIGN=RIGHT VALIGN=MIDDLE SDVAL="10" SDNUM="1045;0;#&nbsp;##0,00&quot; zł&quot;"><FONT SIZE=4>silnik1</FONT></TD>
      </TR>
      <TR>
         <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" COLSPAN=2 HEIGHT=77 ALIGN=LEFT VALIGN=MIDDLE><FONT SIZE=4>rok </FONT></TD>
         <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" ALIGN=RIGHT VALIGN=MIDDLE SDVAL="7" SDNUM="1045;0;#&nbsp;##0,00&quot; zł&quot;"><FONT SIZE=4>silnik 1</FONT></TD>
      </TR>
      <TR>
         <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" COLSPAN=2 HEIGHT=77 ALIGN=LEFT VALIGN=MIDDLE><FONT SIZE=4>rok </FONT></TD>
         <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000" ALIGN=RIGHT VALIGN=MIDDLE SDVAL="20" SDNUM="1045;0;#&nbsp;##0,00&quot; zł&quot;"><FONT SIZE=4>silnik 1</FONT></TD>
      </TR>
   </TBODY>
</TABLE>
<!-- *********************************TYTUŁ***************************************** -->
<HR>



maromixmarek
Posty: 1
Dołączył(a): 21.07.2019

Powrót do Początkujący webmaster


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 24 gości

Subskrypcja

Mamy 53875 zarejestrowanych użytkowników.
Najnowszy użytkownik: rlzmalereview


Nasi użytkownicy napisali:

  • 940457 wiadomości
  • w 249518 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)