如何有效地使用jQuery来增加动态渲染表的列

How to efficiently use jQuery to multiply columns of dynamically rendered table

本文关键字：动态 增加 有效地 jQuery      更新时间：2023-09-26

我正在研究一个非常大的表/表单，它是根据库存可用性动态创建的。该表有5个字段:代码、产品名称、金额、价格和小计。用户应该在Amount字段中设置一个数字，然后有一个jQuery脚本将该金额乘以价格以显示SubTotal。在表中，产品看起来像这样:

<tr> 
    <td>Princess 01</td> 
    <td>Conjunto corpiño y cola less <strong>Talle 85</strong></td> 
    <td><input type="text" id="princess-lingerie-id-963" name="[princess-lingerie][id_963]" value=""></td> 
    <td>$<input type="text" id="price_princess-lingerie-id-963" value="99" readonly="readonly"/></td> 
    <td id="subTotal_princess-lingerie-id-963" name="subTotal"></td> 
</tr>

我的问题是我有很多不同的产品属于不同的产品类别，所以这个属于"公主内衣"(别笑)类别，一个来自"化妆品"类别的产品看起来是这样的:

<tr>    
  <td>D02/3</td> 
  <td>Magic Dual aroma Frutos Rojos</td> 
  <td><input type="text" id="cosmetica-stock-id-1008" name="[cosmetica-stock][id_1008]" value=""></td> 
  <td>$<input type="text" id="price_cosmetica-stock-id-1008" value="26" readonly="readonly"/></td>

我实际上已经创建了一点逻辑，只适用于一个字段，但我不知道如何将其扩展到整个表。谁能帮我一把吗?…我有点不知所措，不知道从哪里开始。

$(document).ready(function(){
$("#princess-lingerie-id-963").keyup(function() {
    var howMany = parseInt($("#princess-lingerie-id-963").val());
    var subTotal = parseInt($("#price_princess-lingerie-id-963").val()) * howMany;
    //assign subTotal to the td
    $("#subTotal_princess-lingerie-id-963").html(subTotal);
});
});

Shad建议添加有用的类是正确的。为了在多行表中以可持续的方式处理计算，还需要一种方法来通用地标识要计算的行。我相信这可以得到很大的改进，但这里有一个基本的例子:

jsfiddle演示在这里。

// there are two cells where the 'id' has this pattern, but only one is selectable (the other is read-only)
// still, it would be better to give it a class if at all possible to avoid confusion
// and possible tampering by users
$("input[id*=-id-]").keyup(function() {
    var howMany = parseInt($(this).parent().next().find('input').val(), 10);
    var subTotal = parseInt($(this).val(), 10) * howMany;
    //assign subTotal to the td
    $(this).parent().next().next().html(subTotal);
});
编辑:

更新，包括基数和条件的空白值:

http://jsfiddle.net/RzBeM/2/

$("input[id*=-id-]").keyup(function() {
    var howMany = parseInt($(this).parent().next().find('input').val(), 10);
    var subTotal = parseInt($(this).val(), 10) * howMany;
    if (isNaN(subTotal)) subTotal = 0;
    //assign subTotal to the td
    $(this).parent().next().next().html(subTotal);
});

首先，我将开始为您的输入提供有用的类，如'qty'和'price'，然后最后一个单元格可以有一个'subtotal'类。这使得下一步成为可能:

jQuery('#TABLEID tr').each(function(i,E){
   var subT=parseInt(jQuery(E).find('.qty').val(),10) * parseFloat(jQuery(E).find('.price').val());
   jQuery(E).find('.subtotal').text('$' + subT.toFixed(2));
});

我使用jQuery遍历表中的每个tr，并运行必要的计算。

最终解决方案可以使用进一步调整的版本:

jQuery(function(){
 jQuery('.qty').keyup(function(){
    var E=jQuery(this).parents('tr').filter(':first');
    var subT=parseInt(E.find('.qty').val(),10) * parseFloat(E.find('.price').val());
    E.find('.subtotal').text('$' + subT.toFixed(2));
 });
});
相关文章：