Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript][HTML] Dynamiczne szukanie + ukryty tekst w tabeli
maromixmarek
post 21.07.2019, 20:33:24
Post #1





Grupa: Zarejestrowani
Postów: 1
Pomógł: 0
Dołączył: 21.07.2019

Ostrzeżenie: (0%)
-----



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ę.




  1.  
  2. <!-- część kodu (92 główne tytuły) -->
  3.  
  4.  
  5.  
  6. <!--- skrypt który chowa tekst -->
  7. jQuery(document).ready(function($){
  8. op = function(obj) {
  9. $(obj).stop().slideToggle();
  10. };
  11. });
  12.  
  13.  
  14.  
  15. <!-- skrypt który szuka słów -->
  16.  
  17.  
  18. var $rows = $('#tabela tr');
  19. $('#szukaj_tabela').keyup(function() {
  20.  
  21. var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
  22. reg = RegExp(val, 'i'),
  23. text;
  24.  
  25. $rows.show().filter(function() {
  26. text = $(this).text().replace(/\s+/g, ' ');
  27. return !reg.test(text);
  28. }).hide();
  29. });
  30.  
  31.  
  32.  
  33.  
  34. <!-- zawartość body -->
  35.  
  36. <center>       
  37.  
  38.  
  39.  
  40.               <input id="szukaj_tabela" type="text" placeholder="tutaj wpisz nazwę której szukasz"></center>
  41.  
  42. <HR>
  43.  
  44.  
  45. <TABLE id="tabela" FRAME=VOID CELLSPACING=0 COLS=3 RULES=NONE BORDER=0>
  46. <COLGROUP><COL WIDTH=424><COL WIDTH=332><COL WIDTH=227></COLGROUP>
  47. <TR>
  48. <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>
  49. <TD STYLE="border-bottom: 1px solid #000000" WIDTH=332 ALIGN=LEFT VALIGN=MIDDLE><FONT SIZE=6><BR></FONT></TD>
  50. <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>
  51. </TR>
  52. </TBODY>
  53. <!-- **************************TYTUŁ************************************************ -->
  54. <HR>
  55.  
  56.  
  57. <HR>
  58.  
  59. <TABLE FRAME=VOID CELLSPACING=0 COLS=1 RULES=NONE BORDER=0>
  60. <COLGROUP><COL WIDTH=424></COLGROUP>
  61. <TR >
  62. <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>
  63. </TR>
  64. </TBODY>
  65. <!-- *******************************uKRYTA ZAWARTOŚĆ******************************************* -->
  66. <HR>
  67.  
  68. <TABLE FRAME=VOID CELLSPACING=0 COLS=3 RULES=NONE BORDER=0>
  69. <COLGROUP><COL WIDTH=424><COL WIDTH=332><COL WIDTH=227></COLGROUP>
  70. <TR id="pokazane1">
  71. <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>
  72. <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>
  73. </TR>
  74. <TR>
  75. <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>
  76. <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>
  77. </TR>
  78. <TR>
  79. <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>
  80. <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>
  81. </TR>
  82. <TR>
  83. <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>
  84. <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>
  85. </TR>
  86. </TBODY>
  87. <!-- ********************************TYTUŁ****************************************** -->
  88. <HR>
  89.  
  90. <TABLE FRAME=VOID CELLSPACING=0 COLS=1 RULES=NONE BORDER=0>
  91. <COLGROUP><COL WIDTH=424></COLGROUP>
  92. <TR>
  93. <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>
  94. </TR>
  95. </TBODY>
  96. <!-- ********************************uKRYTA ZAWARTOŚĆ****************************************** -->
  97. <HR>
  98.  
  99. <TABLE FRAME=VOID CELLSPACING=0 COLS=3 RULES=NONE BORDER=0>
  100. <COLGROUP><COL WIDTH=424><COL WIDTH=332><COL WIDTH=227></COLGROUP>
  101. <TR id="pokazane2">
  102. <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>
  103. <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>
  104. </TR>
  105. <TR>
  106. <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>
  107. <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>
  108. </TR>
  109. <TR>
  110. <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>
  111. <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>
  112. </TR>
  113. <TR>
  114. <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>
  115. <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>
  116. </TR>
  117. </TBODY>
  118. <!-- *********************************TYTUŁ***************************************** -->
  119. <HR>
  120.  
  121.  
  122.  
  123.  
  124.  
  125.  
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 12:28