如何在删除行后从html表中获取单元格的值？

-1

我有一个按钮，当我点击它时，它会动态地在表格中生成行，它还会生成一个按钮来删除该行。我遇到的问题是每次生成一行时，单元格的值在文本字段中求和，当我删除该行时，我需要将该单元格的值减去我的文本字段。这就是为什么当它被移除时我需要获取该单元格的值。如何在删除行后从html表中获取单元格的值？

这是我的按钮塔产生的动态行的表：

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

这是按钮的点击事件jQuery代码：

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

这里面事件点击我有另一个事件点击“删除”按钮，这是删除行的负责人。在这种情况下单击我想要得到的“总”细胞像这样的值：

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

为了能够做到这一点算术运算：小计=小计 - 勇气;

但是场上的勇气是空白的。我怎样才能得到那个细胞的价值？

来源

2017-08-13 Juan José

尝试使用'text'而不是'val'。除此之外，请进行一些调试，并告诉我们值丢失的位置，即变量没有您期望的值。 – Bergi

在第二个单击事件中，我想获取单元格'total'的值，但字段'valor'没有任何内容。 –

你是什么意思，“*没有任何东西*”？你登录时有什么价值？ – Bergi

我在这里建一个最小的可核查的样品，发现在路上几个小点：

要指定为“.eliminar”潜在几次点击事件监听器，当有一个以上的行表。

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

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

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>

来源

2017-08-13 14:34:30 cars10m

谢谢你，我欣赏它。你可以向我解释你在这个例子中使用click事件的方式和我做的方式有什么不同。 –

当你添加一个“委托”事件监听器。on（）'你可以有效地将一个* single *监听器分配给一个已经存在的父元素。在这种情况下，你的表的'tbody'元素。事件侦听器查看指定类型的所有传入事件（这里是：“click”），并且仅当选择器（这里：“.eliminar”）也适合时触发，因此只有在其中一个 - 尚未创建时才会触发 - 点击按钮。您的原始方法可能会将具有多个分配的事件侦听器混淆到单个元素。 – cars10m

感谢您解释这一点，我仍然不知道jQuery的很多事情。 –

我忘了把。家长在表达式（ “TR”）的方法是这样的：

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

我猜想我之前没有找到'td'选择器，所以首先我必须使用.parents（'tr'）去到父选择器，然后尝试找到'td'选择器，然后将html（）方法.text（）方法的ead。现在我可以得到细胞的价值。

来源

2017-08-13 14:36:09

如何在删除行后从html表中获取单元格的值？

回答

相关问题