同时显示SubTotal和Total - Javascript

时间:2013-09-05 09:54:44

标签: javascript

我是Javasript的新手,发现我在下面使用的javascript代码来自我修改过的其他来源。我正在尝试在显示整个表单总数的每个权益的第三列上显示小计。我在显示小计时遇到了困难。这是我的代码。非常感谢您的任何帮助。谢谢!

<table cellpadding="5" cellspacing="3" style="font-size:10px;color: #1666AF; line-height:2.1;" width="280">
    <tbody>
        <tr>
            <td width="60%"><span style="color: #DF2727; font-weight:bold;">Benefits</span></td>
            <td width="20%" align="center" ><span style="color: #DF2727; font-weight:bold;">Qty</span></td>
            <td width="20%"><span style="color: #DF2727; font-weight:bold;">Savings</span></td>
        </tr>
        <tr>
            <td>Benefit 1</td>
            <td align="center">
            <select id="qty" name="BENE_1_800" onchange="CalculateEstimatedSavings(this.form)" >  
                    <option value="0">0</option>  
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select> 
            </td>
            <td align="left"><span id="order_subtotal_1">$0.00</span></td>
        </tr>
        <tr>
            <td>Benefit 2</td>
            <td align="center"><select id="qty" name="BENE_2_266" onchange="CalculateEstimatedSavings(this.form)" >  
                    <option value="0">0</option>  
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select> 
            <td align="left"><span id="order_subtotal_2">$0.00</span></td>
        </tr>
        <tr>
            <td>Benefit 3</td>
            <td align="center"><select id="qty" name="BENE_3_100" onchange="CalculateEstimatedSavings(this.form)" >  
                    <option value="0">0</option>  
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select> </td>
            <td align="left"><span id="order_subtotal">$0.00</span></td>
        </tr>
        <tr>
            <td>Benefit 4</td>
            <td align="center"><select id="qty" name="BENE_4_25" onchange="CalculateEstimatedSavings(this.form)" >  
                    <option value="0">0</option>  
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select> </td>
            <td align="left"><span id="order_subtotal">$0.00</span></td>
        </tr>
        <tr>
            <td>Benefit 5</td>
            <td align="center"><select id="qty" name="BENE_5_25" onchange="CalculateEstimatedSavings(this.form)" >
                    <option value="0">0</option>  
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select> </td>
            <td align="left"><span id="order_subtotal">$0.00</span></td>
        </tr>
        <tr>
            <td>Benefit 6</td>
            <td align="center"><select id="qty" name="BENE_6_25" onchange="CalculateEstimatedSavings(this.form)" >  
                    <option value="0">0</option>  
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select> </td>
            <td align="left"><span id="order_subtotal">$0.00</span></td>
        </tr>
        <tr>
            <td>Benefit 7</td>
            <td align="center"><select id="qty" name="BENE_7_773" onchange="CalculateEstimatedSavings(this.form)" >  
                    <option value="0">0</option>  
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select> </td>
            <td align="left"><span id="order_subtotal">$0.00</span></td>
        </tr>
    </tbody>
</table>
&nbsp;

<table cellpadding="5" cellspacing="3" style="color: #1666AF; font-size:13px; font-weight:bold;" width="280">
    <tbody>
        <tr>
            <td width="62%"><span>Estimated Total Savings:</span></td>
            <td align="left" width="38%"><span id="total_savings">$0.00</span></td>
        </tr>
    </tbody>
</table>
&nbsp;

<div style="width:280px; clear:both;"><a href="#" style="border:none; float:right;"><img src="start-saving_sm.png" /></a></div>
</fieldset>
</form>


<script type="text/javascript">
function CalculateEstimatedSavings(frm) {
    var total_savings = 0

    // Run through all the form fields
    for (var i=0; i < frm.elements.length; ++i) {

        // Get the current field
        form_field = frm.elements[i]

        // Get the field's name
        form_name = form_field.name

        // Is it a "product" field?
        if (form_name.substring(0,4) == "BENE") {

            // If so, extract the price from the name
            item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))

            // Get the quantity
            item_quantity = parseInt(form_field.value)

            // Update the order total
            if (item_quantity >= 0) {
                total_savings += item_quantity * item_price
            }
        }
    }

    // Display the total rounded to two decimal places
    document.getElementById("total_savings").firstChild.data = "$" + round_decimals(total_savings, 2)

}

function round_decimals(original_number, decimals) {
    var result1 = original_number * Math.pow(10, decimals)
    var result2 = Math.round(result1)
    var result3 = result2 / Math.pow(10, decimals)
    return pad_with_zeros(result3, decimals)
}

function pad_with_zeros(rounded_value, decimal_places) {

    // Convert the number to a string
    var value_string = rounded_value.toString()

    // Locate the decimal point
    var decimal_location = value_string.indexOf(".")

    // Is there a decimal point?
    if (decimal_location == -1) {

        // If no, then all decimal places will be padded with 0s
        decimal_part_length = 0

        // If decimal_places is greater than zero, tack on a decimal point
        value_string += decimal_places > 0 ? "." : ""
    }
    else {

        // If yes, then only the extra decimal places will be padded with 0s
        decimal_part_length = value_string.length - decimal_location - 1
    }

    // Calculate the number of decimal places that need to be padded with 0s
    var pad_total = decimal_places - decimal_part_length

    if (pad_total > 0) {

        // Pad the string with 0s
        for (var counter = 1; counter <= pad_total; counter++) 
            value_string += "0"
        }
    return value_string
}
</script>

1 个答案:

答案 0 :(得分:0)

您可以在循环中添加这段代码,或者移出循环以仅更新当前tr的单元格。在CalculateEstimatedSavings函数

 form_field.parentElement.nextElementSibling.getElementsByTagName('span')[0].textContent="$" + round_decimals( item_quantity * item_price, 2)

http://jsfiddle.net/Srq9v/1/看这里

小心nextElementSibling功能,我不确定IE何时支持它。