Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][JavaScript]Usunięcie danego TR z tabeli
Forum PHP.pl > Forum > Przedszkole
denis95x
6.08.2015, 16:45:23
Witam,
poniżej kod działającego dodawania wiersza do tabeli.

Potrzebuje teraz żeby wybrany wiersz po naciśnieciu buttona X usunęło.

jak to zrobić ?

[JAVASCRIPT] pobierz, plaintext 
  1.  
  2. // co się dzieje po kliknięciu na button o id #dodaj
  3. $("#dodaj_wiersz").click(function() {
  4.  
  5.   var tabelka = document.getElementById('pozycje');
  6. var wierszy = tabelka.rows.length;
  7.  
  8. $('#ilewierszy').val(wierszy);
  9.  
  10. 	 var row ='<tr class="dane" id="'+wierszy+'"><td style="text-align:center;" id="'+wierszy+'">'+wierszy+'<input type="button" id="usun_wiersz" class="jquery-add-row" value="x" /></td><td ><input type="text" name="nazwa_pozycji'+wierszy+'" id="nazwa_pozycji'+wierszy+'" class="form-control" placeholder="Nazwa pozycji / artykułu" /></td><td ><input style="text-align:center;" type="text" name="pkwiu'+wierszy+'" id="pkwiu'+wierszy+'" class="form-control"/></td><td ><input style="text-align:center;" type="text" name="ilosc'+wierszy+'" id="ilosc" class="form-control" value="0.00" placeholder="0.00" onchange="checkCyfra(this)" /></td><td><select name="jm'+wierszy+'" data-placeholder="szt" class="selectlist"><option value="">szt</option><option selected="selected" value="szt">szt.</option><option value="usl">usł.</option>			<option value="opak">opak.</option><option value="godz">godz.</option><option value="str">str.</option><option value="m2">m2</option></select></td><td ><input style="text-align:center;" type="text" name="cena_netto'+wierszy+'" id="cena_netto" value="0.00" placeholder="0.00" class="form-control" onchange="checkCyfra(this)" /></td><td ><select name="vat'+wierszy+'" id="vat" data-placeholder="%" class="selectlist" ><option value="0">0</option><option selected="selected" value="23">23</option><option value="22">22</option><option value="20">20</option><option value="19">19</option><option value="15">15</option><option value="8">8</option><option value="7">7</option><option value="3">3</option><option value="0">0</option><option value="0">ZW</option><option value="0">NP</option></select></td><td ><input style="text-align:center;" type="text" name="wartosc_netto'+wierszy+'" id="wartosc_netto" value="0.00" onchange="checkCyfra(this)" class="form-control"/></td><td ><input style="text-align:center;" type="text" name="wartosc_brutto'+wierszy+'" id="wartosc_brutto" value="0.00" onchange="checkCyfra(this)" class="form-control"/></td></tr>';
  11.  
  12. $('#pozycje').find('tbody').append(row);	
  13.  
  14. });
  15.  
[JAVASCRIPT] pobierz, plaintext


Próbowałem w ten sposób ale mi usuwa tylko 1 wiersz który nie był uprzednio dodawany przez jQuery.
W czym może tkwić problem ?

[JAVASCRIPT] pobierz, plaintext 
  1. $(document).ready(function(){
  2. 	$('#pozycje td').click(function(){
  3. 		$(this).parent().remove();
  4. 	});
  5.  
  6. });
[JAVASCRIPT] pobierz, plaintext
Comandeer
6.08.2015, 16:51:43
W tym, że przypinasz to tylko do obecnie istniejących elementów, a musisz też obsługiwać nowo dodawane. I zrobisz to używając event delegation przy pomocy $.fn.on: http://api.jquery.com/on/#on-events-selector-data
denis95x
6.08.2015, 16:53:50
W sensie poprawić dodawanie wierszy ?

Sorka, ale powoli dopiero zaczynam z jQuery mellow.gif
Comandeer
6.08.2015, 16:56:58
Nie, zmienić obsługę kliknięcia.
denis95x
6.08.2015, 17:02:41
W ten sposób przy dodawaniu ?

[JAVASCRIPT] pobierz, plaintext 
  1. $("#dodaj_wiersz").on("click", function() {
[JAVASCRIPT] pobierz, plaintext
Comandeer
6.08.2015, 17:03:42
Chodzi mi o ten kod:
Kod
$('#pozycje td').click(function(){
        $(this).parent().remove();
    });

zmienić na coś typu:
Kod
$('#pozycje').on('click', 'td', function(){
        $(this).parent().remove();
    });
denis95x
6.08.2015, 17:07:13
Dzięki serdeczne, a jest jakaś funkcja na uporządkowanie ID, bo jak się usunie to potem dopisuje i rozsypuje?

wcześniej dodawałem +1

[JAVASCRIPT] pobierz, plaintext 
  1.   var tabelka = document.getElementById('pozycje');
  2. var wierszy = tabelka.rows.length;
  3.  
  4. $('#ilewierszy').val(wierszy);
[JAVASCRIPT] pobierz, plaintext
Comandeer
6.08.2015, 17:08:58
Hm… Nie powinno się nic rozpadać.
denis95x
6.08.2015, 17:11:37
Owszem, chodzi o to, że numerki są nie pokolei bo tamte zostały usunięte, ale mniejsza z tym sobie dam rade...

a jak to przerobić żeby usuwało nie po naciśnięciu na td tylko na
<input type="button" id="usun_wiersz" class="jquery-del-row" value="x" />

Comandeer
6.08.2015, 17:15:46
No zmienić w tej funkcji kliknięcia z td na button i dobrać się do tr używając parents (nie parent!) z odpowiednim parametrem
denis95x
6.08.2015, 17:27:24
Nooo ! w koncu ! smile.gif

Dzięki serdeczne smile.gif

A z cyferkami chodziło mi o to:



Może jakoś pobrać id ostatniego tr i kolejne +1 ?
Tylko w jaki sposób sprawdzić id ostatniego?
Comandeer
6.08.2015, 18:06:05
Jest taki selektor tr:last-child wink.gif
denis95x
6.08.2015, 18:22:46
Dzięki raz jeszcze !
Chyba się nie odwdzięczę !

A skoro już przy tabelach, a pewnie dla ciebie to Pikuś smile.gif

podpowiedziałbyś, albo pokazał jak zsumować wszystkie wartości pod tabelą dla np. wartosc_netto ?

Bo znowu sie pogubie przy tym tr td itd...

dodawanie i wiersze wyglądają tak:

[JAVASCRIPT] pobierz, plaintext 
  1. $("#dodaj_wiersz").click(function() {
  2.  
  3.  
  4.   var tabelka = document.getElementById('pozycje');
  5. var wierszy = tabelka.rows.length;
  6.  
  7. $('#ilewierszy').val(wierszy);
  8.  
  9. 	 var row ='<tr class="dane" id="'+wierszy+'"><td style="text-align:center;" id="'+wierszy+'">'+wierszy+'<button><i class="glyphicon  glyphicon-remove"></i></button></td><td ><input type="text" name="nazwa_pozycji'+wierszy+'" id="nazwa_pozycji'+wierszy+'" class="form-control" placeholder="Nazwa pozycji / artykułu" /></td><td ><input style="text-align:center;" type="text" name="pkwiu'+wierszy+'" id="pkwiu'+wierszy+'" class="form-control"/></td><td ><input style="text-align:center;" type="text" name="ilosc'+wierszy+'" id="ilosc" class="form-control" value="0.00" placeholder="0.00" onchange="checkCyfra(this)" /></td><td><select name="jm'+wierszy+'" id="jm'+wierszy+'" data-placeholder="szt" class="selectlist"><option value="">szt</option><option selected="selected" value="szt">szt.</option><option value="usl">usł.</option>			<option value="opak">opak.</option><option value="godz">godz.</option><option value="str">str.</option><option value="m2">m2</option></select></td><td ><input style="text-align:center;" type="text" name="cena_netto'+wierszy+'" id="cena_netto" value="0.00" placeholder="0.00" class="form-control" onchange="checkCyfra(this)" /></td><td ><select name="vat'+wierszy+'" id="vat" data-placeholder="%" class="selectlist" ><option value="0">0</option><option selected="selected" value="23">23</option><option value="22">22</option><option value="20">20</option><option value="19">19</option><option value="15">15</option><option value="8">8</option><option value="7">7</option><option value="3">3</option><option value="0">0</option><option value="0">ZW</option><option value="0">NP</option></select></td><td ><input style="text-align:center;" type="text" name="wartosc_netto'+wierszy+'" id="wartosc_netto" value="0.00" onchange="checkCyfra(this)" class="form-control"/></td><td ><input style="text-align:center;" type="text" name="wartosc_brutto'+wierszy+'" id="wartosc_brutto" value="0.00" onchange="checkCyfra(this)" class="form-control"/></td></tr>';
  10.  
  11. $('#pozycje').on('tbody').append(row);	
[JAVASCRIPT] pobierz, plaintext


Domyślam się że jakoś w pętli dodając +1 do każdego name/id inputa
ale to już wyższa szkółka jazdy :/
Comandeer
6.08.2015, 18:39:51
Dokładnie, $('td input').each i tam pobierasz $(this).val()
denis95x
6.08.2015, 18:40:53
teraz mnie zamurowało tongue.gif

O czym do mnie mówisz biggrin.gif


Poradziłem sobie ale tylko wykorzystując .on('blur'

Kod
$(document).ready(function() {

$('#pozycje').on('blur', '[id="cena_netto"]', function(){
    var sum = 0;
    $('[id="wartosc_netto"]').each(function() {
        if($(this).val()!="")
         {
            sum += parseFloat($(this).val());
         }

    });
        $('#xyz').empty().append(sum);
});
    });


A jak to przerobić, żeby aktualizowało nie zależnie od blura ?
Comandeer
6.08.2015, 20:14:58
Kod
$('#pole_netto').each(function()
{
    sum += +$(this).val();
});

Coś w takim stylu mniej więcej. BTW może nie działać, bo DOM oczekuje, że tylko jeden element na stronie ma dany [id]
denis95x
6.08.2015, 20:20:35
Juz poradziłem sobie smile.gif
Ale dzięki smile.gif

Może komuś się przyda smile.gif

Kod
$(document).ready(function() {

$('#pozycje').on('blur', 'input', function(){
    var sum_netto = 0;
     var sum_brutto = 0;
    $('[id="wartosc_netto"]').each(function() {
        if($(this).val()!="")
         {
            sum_netto += parseFloat($(this).val());
         }

    });
    
    
     $('[id="wartosc_brutto"]').each(function() {
        if($(this).val()!="")
         {
            sum_brutto += parseFloat($(this).val());
         }

    });
    
        $('#netto').empty().append(sum_netto);
          $('#brutto').empty().append(sum_brutto);
});
    });
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.