Wie erhalte ich nach dem Löschen der Zeile den Wert einer Zelle aus einer HTML-Tabelle?

Question

Ich habe eine Schaltfläche, die, wenn ich darauf klicke, dynamisch Zeilen in der Tabelle generiert, es erzeugt auch eine Schaltfläche, um diese Zeile zu entfernen. Das Problem, das ich habe, ist jedes Mal, wenn eine Zeile generiert wird, wird der Wert einer Zelle in einem Textfeld summiert, und wenn ich diese Zeile entferne, muss ich den Wert von dieser Zelle zu meinem Textfeld subtrahieren. Deshalb muss ich den Wert dieser Zelle abrufen, wenn sie entfernt wird.

Dies ist meine Schaltfläche tha die dynamische Zeile in der Tabelle erzeugt:

<input type="button" name="agregar" id="agregar" value="Agregar" class="btn btn-primary"/> 

Und das ist der jQuery-Code für das Click-Ereignis der Schaltfläche:

$("#agregar").click(function() { 
     var productoId = $("#productoId").val(); 
     var productoDescripcion = $("#productoDescripcion").val(); 
     var productoPrecio = $("#productoPrecio").val(); 
     var productoCantidad = $("#productoCantidad").val(); 
     var productoIva = $("#productoIva").val(); 
     total = (productoPrecio * productoCantidad) - (((productoPrecio * productoCantidad) * productoIva)/100); 
     subTotal = subTotal + total; 
     $("#totalAPagar").val(subTotal); 
     var presupuesto = '<tr>' + 
      '<td>' + productoId + '</td>' + 
      '<td>' + productoDescripcion + '</td>' + 
      '<td>' + productoPrecio + '</td>' + 
      '<td>' + productoCantidad + '</td>' + 
      '<td>' + productoIva + '</td>' + 
      '<td>' + total + '</td>' + 
      '<td class="eliminar-fila"><button id="eliminar" class="btn btn-danger eliminar" type="button"><span class="fa fa-remove"></span></button></td>' + 
      '</tr>';     

     $("#presupuestoDetalle tbody").append(presupuesto); 

     $(".eliminar").click(function() { 
      valor = $(this).find("td").eq(5).text(); 
      $(this).parents("tr").fadeOut("normal", function() { 
       $(this).remove(); 
       subTotal = subTotal - valor; 
       $("#totalAPagar").val(subTotal); 
      }); 
     });     
    });     

Innerhalb dieser Veranstaltung klicken I Klicken Sie auf ein anderes Ereignis, um auf die Schaltfläche "Löschen" zu klicken, die für das Entfernen der Zeile verantwortlich ist. In diesem Fall klicken Ich möchte wie diese den Wert der „total“ Zelle erhalten:

valor = $(this).find("td").eq(5).text(); 

Um diese Rechenoperation zu tun in der Lage: Teilsumme = Teilsumme - Tapferkeit;

Aber das Feld Tapferkeit ist leer. Wie kann ich den Wert dieser Zelle erhalten?

Answer 1

Ich baute eine minimale nachprüfbare Probe hier und fand ein paar kleine Punkte auf dem Weg:

Sie den Click-Ereignis-Listener für „.eliminar“ möglicherweise mehrmals zuweisen, wenn es mehr als eine Linie ist in Ihrem Tabelle.

Ich änderte das zu einer einzigen Zuordnung mit .on().

Ihre valor wurde falsch ermittelt. Es braucht so etwas wie

valor = $(this).closest('tr').find("td").eq(5).text(); 

var subTotal=0,total=0; 
 
$(function(){ 
 
$("#agregar").click(function(){ 
 
    var productoId = $("#productoId").val(); 
 
    var productoDescripcion = $("#productoDescripcion").val(); 
 
    var productoPrecio = $("#productoPrecio").val(); 
 
    var productoCantidad = $("#productoCantidad").val(); 
 
    var productoIva = $("#productoIva").val(); 
 
    total = (productoPrecio * productoCantidad) - (((productoPrecio * productoCantidad) * productoIva)/100); 
 
    subTotal = subTotal + total; 
 
    $("#totalAPagar").val(subTotal); 
 
     var presupuesto = '<tr>' + 
 
      '<td>' + productoId + '</td>' + 
 
      '<td>' + productoDescripcion + '</td>' + 
 
      '<td>' + productoPrecio + '</td>' + 
 
      '<td>' + productoCantidad + '</td>' + 
 
      '<td>' + productoIva + '</td>' + 
 
      '<td>' + total + '</td>' + 
 
      '<td class="eliminar-fila"><button class="btn btn-danger eliminar" type="button">eliminar</button></td>' + 
 
      '</tr>';     
 
     $("#presupuestoDetalle tbody").append(presupuesto); 
 

 
     
 
}); 
 
$('tbody').on("click",".eliminar",function(){ 
 
    valor = $(this).closest('tr').find("td").eq(5).text(); 
 
    $(this).parents("tr").fadeOut("normal", function() { 
 
     $(this).remove(); 
 
     subTotal = subTotal - valor; 
 
     $("#totalAPagar").val(subTotal); 
 
    }); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="productoId" name="productoId" value="123"/> id<br/> 
 
<input type="text" id="productoDescripcion" name="productoDescripcion" value="producto A"/> descr.<br/> 
 
<input type="text" id="productoPrecio" name="productoPrecio" value="10" /> precio<br/> 
 
<input type="text" id="productoCantidad" name="productoCantidad" value="3" /> cant.<br/> 
 
<input type="text" id="productoIva" name="productoIva" value="19" /> iva &nbsp;&nbsp; 
 
<input type="text" id="totalAPagar" name="totalAPagar" value="0"><br/> 
 
<input type="button" name="agregar" id="agregar" value="Agregar" class="btn btn-primary"/> 
 

 
<table id="presupuestoDetalle"> 
 
<tr><th>Id</th><th>Descripcion</th><th>Precio</th><th>Contidad</th><th>Iva</th><th>total</th></tr> 
 
</table>

Answer 2

ich die .parents setzen vergessen zu sein ("tr") Methode im Ausdruck wie folgt aus:

valor = $(this).parents("tr").find("td").eq(5).html(); 

Ich nehme an Ich habe den 'td'-Selektor vorher noch nicht gefunden, also muss ich zuerst zum Parent-Selektor mit .parents (' tr ') gehen und dann den' td'-Selektor finden und dann die html() -Methode inst eingeben ead der .text() -Methode. Jetzt kann ich den Wert der Zelle bekommen.