[AJAX][JavaScript]Usunięcie danego TR z tabeli Opcje

[denis95x]

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 
 
// co się dzieje po kliknięciu na button o id #dodaj
$("#dodaj_wiersz").click(function() {
 
  var tabelka = document.getElementById('pozycje');
var wierszy = tabelka.rows.length;
 
$('#ilewierszy').val(wierszy);
 
	 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>';
 
$('#pozycje').find('tbody').append(row);	
 
});
 
[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 
$(document).ready(function(){
	$('#pozycje td').click(function(){
		$(this).parent().remove();
	});
 
});
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował denis95x 6.08.2015, 16:46:05

[Comandeer]

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]

W sensie poprawić dodawanie wierszy ?

Sorka, ale powoli dopiero zaczynam z jQuery

Ten post edytował denis95x 6.08.2015, 16:56:54

[Comandeer]

Nie, zmienić obsługę kliknięcia.

[denis95x]

W ten sposób przy dodawaniu ?

[JAVASCRIPT] pobierz, plaintext 
$("#dodaj_wiersz").on("click", function() {
[JAVASCRIPT] pobierz, plaintext 

[Comandeer]

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]

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 
  var tabelka = document.getElementById('pozycje');
var wierszy = tabelka.rows.length;
 
$('#ilewierszy').val(wierszy);
[JAVASCRIPT] pobierz, plaintext 

[Comandeer]

Hm… Nie powinno się nic rozpadać.

[denis95x]

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]

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]

Nooo ! w koncu !

Dzięki serdeczne

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?

Ten post edytował denis95x 6.08.2015, 17:35:59

[Comandeer]

Jest taki selektor tr:last-child

[denis95x]

Dzięki raz jeszcze !
Chyba się nie odwdzięczę !

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

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 
$("#dodaj_wiersz").click(function() {
 
 
  var tabelka = document.getElementById('pozycje');
var wierszy = tabelka.rows.length;
 
$('#ilewierszy').val(wierszy);
 
	 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>';
 
$('#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 :/

Ten post edytował denis95x 6.08.2015, 18:26:46

[Comandeer]

Dokładnie, $('td input').each i tam pobierasz $(this).val()

[denis95x]

teraz mnie zamurowało

O czym do mnie mówisz


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 ?

Ten post edytował denis95x 6.08.2015, 20:12:43

[Comandeer]

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]

Juz poradziłem sobie
Ale dzięki

Może komuś się przyda

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);
});
    });