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

Question

我想使用 jQuery keyup 函数进行计算。

Total Price = Quality x Unit Cost Price

Total Price = Quality x Unit Selling Price

jQuery:

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

问题是:当我单击“添加价格”按钮时，会添加新行。如何调用新的行id？

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>

非常感谢我的 friend 们。

Answer 1

工作 fiddle :

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().parent...分配给变量来编写一些js代码。您无法完成所有工作:)

更新

这里:http://jsfiddle.net/AteQ2/

请注意，我已删除了 thead 和 tbody 标记。

这里的技巧是从引起 key-up 事件的输入 DOM 节点向上，直到到达表节点。找到表格后，您可以与 child 一起玩以获取每一行，然后执行相同的操作以获取单元格(以及单元格内的输入)。 jQuery切片的方法相当酷，你有一个广泛的解释here 。 JS 控制台和调试器对于这种 DOM“技巧”非常有帮助(几乎是强制性的)。