获取jquery

Question

我有表可以添加更多行。每行中都有一些输入字段。我想计算值并显示它。同时更新底行的总金额。

这是我的HTML代码：

<table style="background-color:#ccffcc;width:50%; float:left;" id="d">
    <tr>
        <th colspan="6" style="border-bottom:1px solid #AAAAAA;">Debits</th
    </tr>
    <tr>
        <th>User</th>
        <th>Account</th>
        <th>Item</th>
        <th>Unit Price</th>
        <th>Quantity</th>
        <th>Amount</th>
    </tr>
    <tr id="student_entry1">
        <td>
            <input type="hidden" name="totaldr[]" id="totaldr" value="<?php echo count($account);?>">
            <select name="customer" class="form-control" required style="width: 100px;">
            <option value=""><?php echo get_phrase('select_customer');?></option>
            <?php 
            $customers = $this->db->get_where('customer')->result_array();
            foreach ($customers as $row):
            ?>
            <option value="<?php echo $row['componentId'];?>"><?php echo $row['name'];?></option>
            <?php endforeach;?>
            </select>
        </td>
        <td>
            <select name="account" class="form-control" required style="width: 100px;">
            <option value=""><?php echo get_phrase('select_account');?></option>
            <?php 
            $categories = $this->db->get_where('account')->result_array();
            foreach ($categories as $row):
            ?>
            <option value="<?php echo $row['componentId'];?>"><?php echo $row['description'];?></option>
            <?php endforeach;?>
            </select>
        </td>
        <td>
            <select id="item_selector_holder" name="item[]" class="form-control" style="width: 100px; margin-left: 0px;">
            <option value=""><?php echo get_phrase('select_item');?></option>
            <?php 
            $categories = $this->db->get('item')->result_array();
            foreach ($categories as $row):
            ?>      
            <option value="<?php echo $row['componentId'];?>"><?php echo $row['itemName'];?></option>
            <?php endforeach;?>
            </select>
        </td>
        <td>
            <input type="text" name="unitpriced[]" class="unitPriced"style="width: 70px;" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>"/>
        </td>
        <td>
            <input type="text" name="quantityd[]" style="width: 50px;" onchange="calcSum1();" class="quantityd"  data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>"/>
        </td>
        <td>
            <input type="text" name="amount[]" style="width: 60px;" readonly>           
            <input onclick="deleteParentElement(this);" type="button" style="width: 3px; text-align: left; font-weight: bold;font-size: large;" value="-"/>                     
        </td>
    </tr>
    <tr>
        <th><input type="button" onclick="append_debit_table_row();" style="padding: 3px 8px;font-weight: bold;font-size: large;" value=" + "/>
        </th>
        <th colspan="3">Total</th>
        <th id="total">0.00</th>
    </tr>
</table>

这是我的剧本

function calcSum1(){
    var sum = 0.0;
    var unitprice = [];
    var quantity = [];
    var amount = [];

    $(".quantityd").each(function(){            
        quantity = $(this).val();
        $(".unitPriced").each(function(){
            unitprice = $(this).val();
            sum = quantity * unitprice;
        });
        $('input[name=amount]').val(sum);    
    });
}

Answer 1

您需要在计算该行的总金额并设置总值时，从当前行定位单位文本框和总文本框。

我建议你相反迭代行并相应地设置每行的总数。像这样的东西：

 $("#d tr").each(function(){            
       var $this = $(this);
       quantity = parseInt($this.find('.quantityd').val(),10);
       unitprice = parseFloat($this.find('.unitPriced').val(),10);
       $this.find('[name="amount[]"]').val(quantity * unitprice );
 });