Forum PHP.pl

Witajcie,

mam problem z małą wyszukiwarką wewnątrz tabeli i późniejszym wyświetlaniem rekordów.

wyszukiwarka:

[HTML] pobierz, plaintext 
  <script>
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[2];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Szukaj po numerze ..." title="Szukaj po numerze">
  <table class="table table-striped" id="myTable">
    <thead>
      <tr>
        <th>L.p.</th>
        <th style="text-align:left">Nazwisko</th>
        <th style="text-align:left">Nr</th>
        <th style="text-align:left">Rodzaj</th>
        <th style="text-align:left">Data</th>
        <th style="text-align:left;">Wartość</th>
        <th style="text-align:left;">Pozostało</th>
........
 
<? echo '<td  data-label="Edytuj">';
     echo '<center><a href="#Edit" data-toggle="modal" title="Edytuj" data-target="#Edit'.$r['id'].'">
     <i class="fa fa-edit" style="font-size:24px;color:green; box-shadow: 0 0 10px #666;"></i></a></center>';
 
.............................
?>
.............................
[HTML] pobierz, plaintext 

ale dalej w kodzie html, mam taką tabelkę, pojawia się po kliknięciu w ikonę edycji jako modal:

[HTML] pobierz, plaintext 
..........
 
echo '<table width="100%" class="wplaty">';
        echo '<thead>';
        echo '<tr class="wplaty">';
        echo '<th class="wplaty" style="font-size: 12px;">L.p.</th>';
        echo '<th class="wplaty" style="font-size: 12px;">Data wpłaty</th>';
        echo '<th class="wplaty" style="font-size: 12px;">Kwota</th>';
        echo '<th class="wplaty" style="font-size: 12px;">Przyjmujący</th>';
        echo '<th class="wplaty" style="font-size: 12px;">Uwagi</th>';
        echo '</tr>';
        echo '</thead>';
        echo '<tbody>';
 
             while($p = mysqli_fetch_array($platnosci_))
        {
        $lp1++;
        if($p['Skasowano']=='1')
        {
             echo '<tr class="wplaty" style="background-color:Red; text-decoration: line-through;">';
        }
        else
        {
             echo '<tr class="wplaty" style="max-height: 25px;">';
        }
        echo '<td style="text-align:center; font-size: 12px;" class="wplaty" data-label="L.p.">'.$lp1.'</td>';
        echo '<td style="text-align:left; font-size: 12px;"   class="wplaty" data-label="Data">'.$p['data_wplaty'].'</td>';
        echo '<td style="text-align:left; font-size: 12px;"   class="wplaty" data-label="Kwota">'.$p['kwota'].'</td>';
        echo '<td style="text-align:left; font-size: 12px;"   class="wplaty" data-label="Operator">'.$p['kto_dodal'].'</td>';
        echo '<td style="text-align:left; font-size: 12px; overflow-wrap: break-all;" class="wplaty" data-label="Uwagi">'.$p['UwagiR'].'</td>';
 
......
[HTML] pobierz, plaintext 

Problem polega na tym, że jeśli kliknę w rekord bez wcześniejszego wyszukiwania go to wszystko jest OK, ale jeśli najpierw go wyszukam i kliknę to druga tabelka (dokładnie wynik pętli), się nie wyświetla. Proszę o pomoc....

Ten post edytował krzesik 6.01.2026, 22:53:11

Czy ten modal jest w środku <tr> albo <td> ?

Ten post edytował ZenekN 8.01.2026, 21:44:18

tak jest zarówno w <tr> jak i w <td>

Problem jest dokładnie w tym miejscu:

[JAVASCRIPT] pobierz, plaintext 
tr = table.getElementsByTagName("tr")
[JAVASCRIPT] pobierz, plaintext 

Musisz ograniczyć zmienną do zakresu tej tabeli w której chcesz filtrować:

[JAVASCRIPT] pobierz, plaintext 
const tr = document.querySelectorAll("#myTable > tbody > tr")
[JAVASCRIPT] pobierz, plaintext 

Ogranicz selekcję do #myTable > tbody > tr albo przenieś modal poza tabelę (najlepiej zrobić oba).
Najlepiej nazwij zmienną na rows bo w ten sposób bardziej będziesz rozumiał logikę kodu.

[JAVASCRIPT] pobierz, plaintext 
const rows = document.querySelectorAll("#myTable > tbody > tr");
 
      rows.forEach((row) => {
        const td = row.querySelector("td:nth-child(3)"); // 3 kolumna = Nr
        if (!td) return;
 
        const txtValue = (td.textContent || td.innerText || "").toUpperCase();
        row.style.display = txtValue.includes(filter) ? "" : "none";
      });
[JAVASCRIPT] pobierz, plaintext 

//edit
Gdy dokonujesz wyszukiwania skrypt „przefiltrowuje” także <tr> z tej drugiej tabeli (pętla while(...) w modalu) i ustawia im display: none. Potem otwierasz modal i widzisz pustkę, bo wiersze są nadal ukryte.


Ten post edytował ZenekN 10.01.2026, 10:26:35

Ta tabela jest dynamiczna czy "wygenerowana" zostaje już taka na stronie? Bo jak zostaje, to nie ma sensu przeszukiwać `<table>` za każdym razem od nowa.
Wrzuć sobie $key => $value do jakiejś zmiennej i przy użyciu prostego `array.filter(...)` dostaniesz klucze, które później - po przemapowaniu na wiersze tabeli w HTML - już tylko podświetlisz albo wyświetlisz.