Question

我想用jQuery keyup函数计算。

Total Price = Quality x Unit Cost Price

Total Price = Quality x Unit Selling Price

jQuery的：

$('input').keyup(function(){
        //calculate
    });

问题是：当我点击添加价格按钮时，会添加新行。如何调用新的行ID？

price

HTML：

<div class="price_table">
        <div class="row">
            <div class="span5 offset1"><h1>Price Breakdown<h1></div>
            <div class="span4 offset1"><input type="button" id="add_price" class="btn btn-primary" value="Add Price" style="float:right;margin:30px 0px 5px 0px;"/></div>
        </div>
        <div class="row">
            <div class="span10 offset1">
        <table class="addcost_table table tablesorter">
            <thead>
                <tr class="header_row">
                    <th>Item Group</th>
                    <th>Name</th>
                    <th>Code</th>
                    <th>Quantity</th>
                    <th class="cost_price">Unit Cost Price</th>
                    <th class="selling_price">Unit Selling Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                   <td><?= form_input('items[0][sub_header]', 'Hotel') ?></td>
                   <td><?= form_input('items[0][name]', 'Twin Room') ?></td>
                   <td><?= form_input('items[0][price_type]', 'TWN') ?></td>
                   <td><?= form_input('items[0][quantity]', '5') ?> </td>
                   <td class="cost_price"><?= form_input('items[0][cost]', '100') ?> </td>
                   <td class="selling_price"><?= form_input('items[0][price]', '120') ?> </td>
                </tr>
                <tr>
                   <td><?= form_input('items[1][sub_header]', 'Hotel') ?></td>
                   <td><?= form_input('items[1][name]', 'Single Room') ?></td>
                   <td><?= form_input('items[1][price_type]', 'SGL') ?></td>
                   <td><?= form_input('items[1][quantity]', '1') ?> </td>
                   <td class="cost_price"><?= form_input('items[1][cost]', '80') ?> </td>
                   <td class="selling_price"><?= form_input('items[1][price]', '100') ?> </td>
                </tr>
                <tr>
                   <td><?= form_input('items[2][sub_header]', 'Meals') ?></td>
                   <td><?= form_input('items[2][name]', 'Buffet Breakfast') ?></td>
                   <td><?= form_input('items[2][price_type]', 'BRE') ?></td>
                   <td><?= form_input('items[2][quantity]', '2') ?> </td>
                   <td class="cost_price"><?= form_input('items[2][cost]', '10') ?> </td>
                   <td class="selling_price"><?= form_input('items[2][price]', '10') ?> </td>
                </tr>
                <tr>
                   <td  colspan="4" style="text-align:right;margin-right:10px;"><b><span style="margin-right:20px;">Total Price X Qty</span></b></td>
                   <td class="cost_price"><?= form_input('items[3][cost]', '600') ?></td>
                   <td class="selling_price"><?= form_input('items[3][cost]', '500') ?></td>

                </tr>
            </tbody>
        </table>
        </div>
        </div>

        <div class="row">
            <div class="span11 offset1">
             <?= form_submit(array('class' => 'btn btn-primary'), 'Submit') ?>
            </div>  
        </div>
    </div>

非常感谢我的朋友们。

Answer 1

$(document).ready(function (){

    $('input').keyup(function(){
        //calculate
        var costpriceSum = 0;
        var selling_priceSum = 0;
        $.find(".cost_price").each(function (){
            costpriceSum += $(this).value;
        });
        $.find(".selling_price").each(function (){
            selling_priceSum += $(this).value;
        });

        //Set costpriceSum
        //Set selling_priceSum

    });

});

Answer 2

您可能希望为每个输入元素提供一个自己的类，以便您可以轻松地循环它。

// Enclosed in an anonymous func, is for namespacing, global variables, performance etc.
// See: http://stackoverflow.com/questions/2421911/what-is-the-purpose-of-wrapping-whole-javascript-files-in-anonymous-functions-li
(function(window, document, $, undefined) {
    var totalSelling = calculateTotal('.selling_price_element');
    var totalCost = calculateTotal('.cost_price_element');

    function calculateTotal(element)
    {
        // Start at 0;
        var total = 0;

        // Loop over each element
        $(element).each(function() {

            var element = $(this),
                price = element.val(); // Get the value

            price = parseFloat(price); // Convert the input to a workable float.

            // You might want to do some rounding, validation etc.. here.

            total = total + price; 

        });

        // return the total, round to two decimals
        return total.toFixed(2);
    }
})(this, document, jQuery);

Answer 3

工作小提琴：

http://jsfiddle.net/vYbb2/

我试图让你按照你的说法来表......

$('input').keyup( function(self) {
  var buyCostAcc = 0;
  var sellCostAcc = 0;
  $($($($(this).parent().parent().parent()).children()).slice(1, -1)).each(function(self){
    var quantity = $($(this).children()[3]).children().val();
    var buyCost = $($(this).children()[4]).children().val();
    var sellCost = $($(this).children()[5]).children().val();
    buyCostAcc += quantity * buyCost;
    sellCostAcc += quantity * sellCost;
  });
  $($($($($($(this).parent().parent().parent()).children()).slice(-1)).children()[2]).children()).val(buyCostAcc);
  $($($($($($(this).parent().parent().parent()).children()).slice(-1)).children()[3]).children()).val(sellCostAcc);
});

你可以通过将这个大的父（）。parent ...分配给变量来弥补js代码。你无法完成所有工作：）

<强>更新

此处：http://jsfiddle.net/AteQ2/

请注意，我已删除了thead和tbody代码。

这里的技巧是从导致键入事件的输入DOM节点上升，直到到达表节点。找到表后，您可以与子项一起玩每一行，然后执行相同操作以获取单元格（以及单元格内的输入）。切片jQuery的方法非常酷，你有一个广泛的解释here。 JS控制台和调试器对于这种DOM＆＃34;技巧＆＃34;非常有帮助（几乎是强制性的）。

Answer 4

要将侦听器注册到将来的元素（即将在设置处理程序后创建），请使用带有第二个参数的on（）作为选择器：

$(document).on('keyup', 'input', function(){
    //calculate
});

这表示只要 keyup 事件发生，请检查它是否来自输入，如果是，则调用我的功能。

如何使用jQuery计算表单输入？

4 个答案: