jquery table rows lines totalals and total total

我目前正在为计算机维修技术人员编写一个小插件，现在我正在尝试对发票部分进行编码，但没有多少运气！jquery table rows lines totalals and total total

我已经从数据库填充字段，但我试图使用jquery更新行总数和发票总额。

下面是我想要做的快速图像！

enter image description here 我试图让它更新pageload上的总数，以及当单位成本和数量文本框中的值发生变化时。

$(document).ready(function() { 
    $("#invoiceitems tbody tr").each(function() { 
     $(this).change(function() { 
      updateTotal(); 
     }); 
    }); 
}); 

function updateTotal() { 

    //Calculate Subtotal for each item 
    var quantity = $('.quantity').val(); 
    var price = $('.price').val(); 
    var subtotal = parseInt(quantity) * parseFloat(price); 
    $('.subtotal').text(subtotal); 
    //Calculate Grand Total 
    var sum = 0; 
    $('.linetotal').each(function() { 
     sum += parseFloat($(this).text()); 
    }); 
    $('#grandTotal').html(parseFloat(sum)); 
}

在这里找到这个代码，但我真的没有线索，无法让它工作！

某些方向/帮助将不胜感激！

非常感谢 Jase

来源

2012-09-07 Jason Mutton

你可以显示任何html或更好的使用http://www.jsfiddle.net？ – Dom

http://jsfiddle.net/7gaWf/1/我不确定我是否做得正确，第一次使用小提琴！ –

看起来你是一个完全新手jQuery .. !!好开始虽然..不难捡起来..

这里.price，.quantity和.lineTotal对应于他们正在谈论的列的类名称。 grandTotal是表中的Total的ID ..

我都忍了你正在努力工作到..应该是一个良好的开端的情况下Working Example Updated ..

但不要拿我没有添加任何条件，注意检查，如果用户输入是否有效...尝试添加它们，同时推出它。让我知道如果你在解码时遇到任何困难。

来源

2012-09-07 21:10:49

哇！我刚刚实现它，它效果很好！还有一件事，我怎样才能在页面初始加载时生成总计？ –

只需稍微调整一下你的代码。将updateTotals（）方法分成两部分。检查上面的更新FIDDLE ..我将它们分成了两个函数。只需在Document.Ready中调用CalculateTotals（）。 –

http://jsfiddle.net/BE8c7/1/这就是我现在所拥有的。似乎无法让它生成负载上的总计/总数。由于某种原因，当我使用按钮添加新的文本字段元素时，它似乎工作正常。 –

鉴于这种简单的HTML为例：

<table> 
<tr> 
<td> 
<input type="text" name="unitCost[]" id="unitCost_1" value="15.99" class="editable"/> 
</td> 
<td> 
<input type="text" name="quantity[]" id="quantity_1" value="1" class="editable"/> 
</td> 
</tr> 
<tr> 
<td> 
<input type="text" name="unitCost[]" id="unitCost_2" value="2.50" class="editable"/> 
</td> 
<td> 
<input type="text" name="quantity[]" id="quantity_2" value="1" class="editable"/> 
</td> 
</tr> 
</table>

我想你会想改变你的jQuery看起来是这样的：

$(document).ready(function() { 
    updateTotal(); 

    $(".editable").live("change", function() { 
        updateTotal(); 
    }); 
});

没有看到您的实际HTML，很难说您是否有什么问题updateTotal()函数

来源

2012-09-07 20:59:14

jquery table rows lines totalals and total total

回答

相关问题