Question

I have a button that when I click on it, it dynamically generates rows in the table, it also generates a button to remove that row. The problem I have is every time a row is generated, the value of a cell is summed in a text field, and when I remove that row I need to subtract the value from that cell to my text field. That is why I need to get the value of that cell when it is removed.

This is my button tha generates the dynamic row in the table:

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

And this is the jQuery code for the click event of the button:

$("#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);
            });
        });                
    });

Inside this event click I have another event click on the "delete" button, which is the one in charge of removing the row. In this event click I want to get the value of the "total" cell like this:

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

In order to be able to do this arithmetic operation: subTotal = subTotal - valor;

But the field valor is in blank. How can i get the value of that cell?

Answer 1

我在这里建立了一个可验证的最小样本，并在途中发现了一些小点：

您正在为＆＃34; .eliminar＆＃34;分配点击事件监听器。可能好几次，当你的表格中有多行时。

我使用.on()将其更改为单个作业。

您的valor被错误地判定了。它需要像

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我忘了把.parents（＆＃34; tr＆＃34;）方法放在这样的表达式中：

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

我想我没有找到＆＃39; td＆＃39;选择器之前，所以首先我必须使用.parents（＆＃39; tr＆＃39;）转到父选择器，然后尝试找到＆＃39; td＆＃39;选择器，然后我把html（）方法而不是.text（）方法。现在我可以得到细胞的价值。

How to get the value of a cell from an html table after deleting the row?

2 个答案: