Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Usuwanie wierszy z tabeli jquery
Forum PHP.pl > Forum > Przedszkole
arzach
5.09.2011, 08:09:09
Witam napisałem taki kod i wszystko działa ale mam problem z napisaniem linka który będzie usuwał wiersz z tabeli

[JAVASCRIPT] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <title>jquery</title>
  4.         <script type="text/javascript" src="jquery.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7.   $("#dodaj").click(function(){
  8.  
  9.  
  10.     var minuta = $("#bramki1").val();
  11.     var zawodnik_id = $("#zawodnik_id_g1").val();
  12.     var zawodnik_name = $("#zawodnik_id_g1 :selected").text();
  13.  
  14.     $("<tr><td>Minuta: </td><td><input type='text' value='" + minuta + "'/></td><td><a href='zawodnik.php?zawodnik_id=" + zawodnik_id + "'>" + zawodnik_name + "</a> </td><td><a href='#' id='del' style='color: #CC0000;'>Usun</a></td></tr>").appendTo("#wynik");
  15.  
  16.   });
  17.  
  18.   $("#del").click(function(){
  19.  
  20.     $(this).parent("tr").remove();
  21.  
  22.   });
  23. });
  24. </script>
  25.  
  26.  
  27.  
  28.     </head>
  29.     <body>
  30.  
  31. Minuta meczu <input type="text" id="bramki1" name="bramki1" value="0" /> 	
  32. <select id="zawodnik_id_g1" name="zawodnik_id_g1">
  33. 		<option value="1">Zawodnik 1</option>
  34. 		<option value="2">Zawodnik 2</option>
  35. </select>
  36.  <a href="#" id="dodaj">Dodaj</a>    
  37.  
  38. <form id="foto" name="formularz" action="">
  39. <table id="wynik"> 
  40.  
  41. </table>
  42. </form>
  43.  
  44.     </body>
  45. </html>
[JAVASCRIPT] pobierz, plaintext



Proszę o pomoc
nospor
5.09.2011, 08:17:48
http://api.jquery.com/parent/
Cytat
The .parents() and .parent() methods are similar, except that the latter only travels a SINGLE LEVEL UP the DOM tree.

arzach
5.09.2011, 08:31:36
Nie mam pojęcia jak to zrobić mógł byś podać jak to zrobić to bym zrozumiał.

Próbowałem z 
[JAVASCRIPT] pobierz, plaintext 
  1. $(this).closest('tr').remove();  
[JAVASCRIPT] pobierz, plaintext


I nie działa

Z tego co podałeś to parent() idzie w górę tylko o jeden poziom wiec próbowałem tak

[JAVASCRIPT] pobierz, plaintext 
  1. $(this).parent('tr').parent('td').parent('td').parent('td').remove();
[JAVASCRIPT] pobierz, plaintext


I też nie działa

nospor
5.09.2011, 08:34:37
W cytacie co ci podałem masz wzminakę o PARENTS(). Juz nie kazałem ci czytać całego linka, a podałem właściwy fragment to nawet tego nie mogłeś ze zrozumieniem przeczytać :/

Kolejna sprawa to to, że zawsze nadajesz ID="del"
ID z definicji ma być unikalne a ty zawsze nadajesz to samo ID. Jak już coś to nadawaj klasę i szukaj po klasie.
arzach
5.09.2011, 08:43:12
Mimo to zrobiłem tak i nie działa

[JAVASCRIPT] pobierz, plaintext 
  1.   $(".del").click(function(){
  2.  
  3.  
  4.      $(this).parents("tr").remove(); 
  5.  
  6.  
  7.  
  8.   });
[JAVASCRIPT] pobierz, plaintext
nospor
5.09.2011, 08:46:09
Pierwszy i najważniejszy test:
$(".del").click(function(){

alert('Widzisz mnie??');
$(this).parents("tr").remove();



});

Tak sobie patrzę na Twój kod i już wiem, ze ten alert sie nie pojawi, bo ty zdarzenie do DEL przypisujesz tylko raz na początku skryptu, kiedy jeszcze nic nie dodałeś.
Albo poczytaj o LIVE albo przypisuj zdarzenie po dodaniu wiersza.
arzach
5.09.2011, 10:10:33
Mam jeszcze problem ponieważ mam teraz zagnieżdżoną tabelkę i usuwa mi wszystkie tr zamiast jednego

[JAVASCRIPT] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <title>jquery</title>
  4.         <script type="text/javascript" src="jquery.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7.   $("#dodaj").click(function(){
  8.  
  9.  
  10.     var minuta = $("#bramki1").val();
  11.     var zawodnik_id = $("#zawodnik_id_g1").val();
  12.     var zawodnik_name = $("#zawodnik_id_g1 :selected").text();
  13.  
  14.    var new_tr = $("<tr><td>Minuta: </td><td><input type='text' value='" + minuta + "'/></td><td><a href='zawodnik.php?zawodnik_id=" + zawodnik_id + "'>" + zawodnik_name + "</a> </td></tr>").appendTo("#wynik");
  15.    var new_td = $("<td>");
  16.  
  17.  
  18.     var new_link = $("<a href='#' style='color: #CC0000;'>usuń</a>");
  19.  
  20.    new_link.click(function()
  21. 			{
  22. 				$(this).parents("tr").remove(); 
  23. 				return false;
  24. 			});
  25.  
  26.    new_td.append(new_link);
  27.    new_tr.append(new_td);
  28.  
  29.  
  30.   });
  31.  
  32.   $(".del").click(function(){
  33.  
  34.      $(this).parents("tr").remove(); 
  35.  
  36.   });
  37. });
  38. </script>
  39.  
  40.  
  41.  
  42.     </head>
  43.     <body>
  44.  
  45. Minuta <input type="text" id="bramki1" name="bramki1" value="0" /> 	
  46. <select id="zawodnik_id_g1" name="zawodnik_id_g1">
  47. 		<option value="1">Zawodnik 1</option>
  48. 		<option value="2">Zawodnik 2</option>
  49. </select>
  50.  <a href="#" id="dodaj">Dodaj</a>    
  51.  
  52.  
  53. <table> 
  54.  
  55. <tr>
  56.  <td>Bramki</td>
  57. </tr>
  58.  
  59. <tr>
  60.  <td> <table id="wynik"></table> </td>
  61. </tr>
  62.  
  63. <tr>
  64. <td> <table></table> </td>
  65. </tr>
  66. </table>
  67.  
  68.  
  69.     </body>
  70. </html>
[JAVASCRIPT] pobierz, plaintext




Proszę o pomoc
nospor
5.09.2011, 10:18:52
tr:first
arzach
5.09.2011, 10:32:00
Dziękuje bardzo wszystko działa
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.