Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript](jQuery) usuwanie wiersza w tabeli
Forum PHP.pl > Forum > Przedszkole
kayman
js

  1.  
  2. //dodaje wiersz
  3.  
  4. $('#add2').click(function(){
  5. var count = $('tbody tr').length + 1;
  6. var tr = '<tr><td>' + count + '</td><td>' + $('#name').val() + '</td><td>' + $('#lastname').val() + '</td><td>' + $('#adress').val() + '</td><td><div style=" color: green; cursor: pointer; text-align:center;"><span class="glyphicon glyphicon-pencil"></span><span class="glyphicon glyphicon-user"></span><span class="glyphicon glyphicon-heart"></span></div></td><td><div style="text-align:center"><span class="glyphicon glyphicon-remove-circle" style="color: red; cursor: pointer;"></span></div></td></tr>';
  7. $('table > tbody:last').append(tr);
  8. });
  9.  
  10. //usuwa wiersz (teoretycznie :))
  11.  
  12. $(".glyphicon-remove-circle").click(function() {
  13. var tr = $(this).closest('tr');
  14. tr.css("background-color","#FF3700");
  15. tr.fadeOut(400, function(){
  16. tr.remove();
  17. });
  18. return false;
  19. });
  20.  
  21.  
  22.  


tabela

  1.  
  2. <table class = "table table-hover table-condensed table-bordered">
  3. <thead class="theader">
  4. <tr>
  5. <th>#</th>
  6. <th>Imię</th>
  7. <th>Nazwisko</th>
  8. <th>Adress</th>
  9. <th></th>
  10. <th></th>
  11. </tr>
  12. <tr>
  13. <td>1</td>
  14. <td>Jan</td>
  15. <td>Nowak</td>
  16. <td>Warszawa ul. Ogrodowa 8/22</td>
  17. <td><div style=" color: green; cursor: pointer; text-align:center;"><span class="glyphicon glyphicon-pencil"></span><span class="glyphicon glyphicon-user"></span><span class="glyphicon glyphicon-heart"></span></div></td>
  18. <td><div style="text-align:center"><span class="glyphicon glyphicon-remove-circle" style="color: red; cursor: pointer;"></span></div></td>
  19. </tr>
  20.  


Witam!

czy ktoś wie dlaczego usuwany jest tylko pierwszy wiersz i tylko raz?

e:/ dane do kolejnych wierszy pochodzą z formularza i są dodawane
trueblue
Temat często poruszany - delegacja zdarzeń. Dodajesz elementy dynamicznie.
http://jsfiddle.net/3xuxr456/
kayman
Cytat(trueblue @ 8.01.2015, 08:46:37 ) *
delegacja zdarzeń. Dodajesz elementy dynamicznie.


czyli jak to rozumieć? js "nie wie" że doszły nowe elementy w html i trzeba stosować odpowiednie techniki?

btw. bardzo dziękuje za pomoc.
trueblue
Nie w tym rzecz. Podpinasz zdarzenie do istniejących elementów, a te nowe są dołączane później (i nie mają podpiętych zdarzeń).
Delegacja filtruje zdarzenia dzieci, które docierają do rodzica. Filtrowanie na podstawie podanego selektora, tu:. glyphicon-remove-circle.
kayman
to może lepiej w ogóle dodawać html w takiej formie? może będzie łatwiej operować na tych wierszach szczególnie jak dojdzie edycja, ajax etc

  1.  
  2. <tr id="tr-5">
  3. ...
  4. <td id="name-5">jan</td>
  5. ...
  6. ... <span onClick="editRow(5)" class="glyphicon glyphicon-pencil"></span>
  7. ... <span onClick="deleteRow(5)" class="glyphicon glyphicon-remove-circle" style="color: red; cursor: pointer;"></span> ...
  8. </tr>
  9.  

trueblue
Pozostałbym przy delegacji. Będzie efektywniejsze przy dużej liczbie wierszy.
kayman
posłucham rady -> dzięki bardzo
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.