如何使我当前的脚本Estimate Total Box显示全价,包括美分?就目前而言,如果我在脚本中加上一个美分值,它只会在“估算总计”框中显示没有美分的美元金额。这是我的JS和HTML:
<table id="order-table">
<tr>
<th class="thfiller" width="200px"></th>
<th class="thname">Phone Type</th>
<th class="thquantity">Quantity</th>
</tr>
<tr class="even">
<td class="product-image"><a href="phoneimages/Polycom_SoundPoint_IP_650.png" title="Polycom SoundPoint IP 650" data-lightbox="Polycom_SoundPoint_IP_650"><img id="product-image" src="phoneimages/Polycom_SoundPoint_IP_650.png"></a><br><center><a href="pdf/soundpoint_ip650_datasheet.pdf" target="_new">View PDF</a></center></td>
<td class="product-title"><p><b>Polycom SoundPoing IP 650</b></p><p>Designed to appeal to both executive users who require advanced features and applications, and telephone attendants who need multiple line support, the Polycom SoundPoint IP 650 sets a new standard for high-performance IP phones.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="650-num-pallets" name="Polycom_SoundPoint_IP_650"></input></td>
<td class="price-per-pallet" style="display:none">$<span>449</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="650-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><a href="phoneimages/Polycom_SoundPoint_IP_560.png" title="Polycom SoundPoint IP 560" data-lightbox="Polycom_SoundPoint_IP_560"><img id="product-image" src="phoneimages/Polycom_SoundPoint_IP_560.png"></a><br><center><a href="pdf/soundpoint_ip560_datasheet.pdf" target="_new">View PDF</a></center></td>
<td class="product-title"><p><b>Polycom SoundPoint IP 560</b></p><p>The four-line SoundPoint IP 560 desktop phone delivers calls of unprecedented richness and clarity and supports a comprehensive range of cutting-edge features.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="560-num-pallets" name="Polycom_SoundPoint_IP_560"></input></td>
<td class="price-per-pallet" style="display:none">$<span>464.50</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="560-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><a href="phoneimages/Polycom_soundPoint_IP_450.png" title="Polycom SoundPoint IP 450" data-lightbox="Polycom_soundPoint_IP_450"><img id="product-image" src="phoneimages/Polycom_soundPoint_IP_450.png"></a><br><center><a href="pdf/soundpoint_ip450_datasheet.pdf" target="_new">View PDF</a></center></td>
<td class="product-title"><p><b>Polycom SoundPoint IP 450</b></p><p>The SoundPoint IP 450 desktop phone is designed to bring advanced telephony features and applications to cubicle/office workers handling a moderate volume of calls.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="450-num-pallets" name="Polycom_soundPoint_IP_450"></input></td>
<td class="price-per-pallet" style="display:none">$<span>391.60</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="450-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><a href="phoneimages/Polycom_soundPoint_IP_335.png" title="Polycom SoundPoint IP 335" data-lightbox="Polycom_soundPoint_IP_335"><img id="product-image" src="phoneimages/Polycom_soundPoint_IP_335.png"></a><br><center><a href="pdf/soundpoint_ip335_datasheet.pdf" target="_new">View PDF</a></center></td>
<td class="product-title"><p><b>Polycom SoundPoint IP 335</b></p><p>The SoundPoint IP 335 phone delivers a business grade telephony endpoint at an entry-level price.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="335-num-pallets" name="Polycom_soundPoint_IP_335.png"></input></td>
<td class="price-per-pallet" style="display:none">$<span>314.53</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="335-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><a href="phoneimages/Polycom_VVX_1500.png" title="Polycom VVX 1500" data-lightbox="Polycom_VVX_1500"><img id="product-image" src="phoneimages/Polycom_VVX_1500.png"></a><br><center><a href="pdf/vvx1500_datasheet.pdf" target="_new">View PDF</a></center></td>
<td class="product-title"><p><b>Polycom VVX 1500</b></p><p>The VVX 1500 is an ideal all-in-one productivity tool for todays busy executives and professionals, whether they are in office, retail, professional services, or healthcare environments.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="1500-num-pallets" name="Polycom_VVX_1500"></input></td>
<td class="price-per-pallet" style="display:none">$<span>944</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="1500-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><a href="phoneimages/Aastra_9143i.png" title="Aastra 9143" data-lightbox="Aastra_9143i"><img id="product-image" src="phoneimages/Aastra_9143i.png"></a><br><center><a href="pdf/aastra_9143i_datasheet.pdf" target="_new">View PDF</a></center></td>
<td class="product-title"><p><b>Aastra 9143i</b></p><p>Our standard basic phone. The 9143i is ideally suited as an everyday desk phone for moderate telephone users.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="9143i-num-pallets" name="Aastra_9143i"></input></td>
<td class="times" style="display:none">X</td>
<td class="price-per-pallet" style="display:none">$<span>294.76</span></td>
<td class="equals" style="display:none">=</td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="9143i-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><a href="phoneimages/Polycom_SoundStation_Phone_IP_6000.png" title="Polycom SoundStation Phone IP 6000" data-lightbox="Polycom_SoundStation_Phone_IP_6000"><img id="product-image" src="phoneimages/Polycom_SoundStation_Phone_IP_6000.png"></a><br><center><a href="pdf/soundstation_ip6000_datasheet.pdf" target="_new">View PDF</a></center></td>
<td class="product-title"><p><b>Polycom SoundStation Phone IP 6000</b></p><p>The SoundStation IP 6000 is an advanced IP conference phone that delivers superior performance for small to midsize conference rooms.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="6000-num-pallets" name="Polycom_SoundStation_Phone_IP_6000"></input></td>
<td class="price-per-pallet" style="display:none">$<span>826.30</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="6000-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><a href="phoneimages/Polycom_SoundPoint_IP_650_Expansion_Module.png" title="Polycom SoundPoint Backlit IP 650 Expansion Module" data-lightbox="Polycom_SoundPoint_IP_650_Expansion_Module"><img id="product-image" src="phoneimages/Polycom_SoundPoint_IP_650_Expansion_Module.png"></a><br><center><a href="pdf/soundpoint_ip650_expansion_module_datasheet.pdf" target="_new">View PDF</a></center></td>
<td class="product-title"><p><b>Polycom SoundPoint Backlit IP 650 Expansion Module</b></p><p>The SoundPoint IP Backlit Expansion Module boosts telephone attendant productivity with enhanced user interface and advanced call handling capabilities.</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="650-expansion-num-pallets" name="Polycom_SoundPoint_IP_650_Expansion_Module"></input></td>
<td class="price-per-pallet" style="display:none">$<span>374.95</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="650-expansion-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><a href="phoneimages/Panasonic_KX-TGP500_Cordless_Phone.png" title="Panasonic KX-TGP500 Cordless Phone" data-lightbox="Panasonic_KX-TGP500_Cordless_Phone"><img id="product-image" src="phoneimages/Panasonic_KX-TGP500_Cordless_Phone.png"></a></td>
<td class="product-title"><p><b>Panasonic KX-TGP500 Cordless Phone</b></p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="Panasonic_KX-TGP500_Cordless_Phone"></input></td>
<td class="price-per-pallet" style="display:none">$<span>250</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<!-- <tr>
<th class="thfiller" width="200px"></th>
<th class="thname">Server Grade</th>
<th class="thquantity">Quantity</th>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/Asterisk-Phone-System-Standard.jpg" width="149px" height="200px"></td>
<td class="product-title"><p><b>Inexpensive Server</b></p><p>Recommended for up to 15 extensions</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="Asterisk-Phone-System-Standard"></input></td>
<td class="price-per-pallet" style="display:none">$<span>1500</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><img id="product-image" src="phoneimages/2941-1.jpg" width="149px" height="200px"></td>
<td class="product-title"><p><b>Standard Server</b></p><p>Recommended for 5 to 25 extensions</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="2941-1"></input></td>
<td class="price-per-pallet" style="display:none">$<span>1750</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/Asterisk-Phone-System-Rack-Mount.jpg"></td>
<td class="product-title"><p><b>Standard Server Rack Mount</b></p><p>Recommended for 5 to 25 extensions</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="Asterisk-Phone-System-Rack-Mount"></input></td>
<td class="price-per-pallet" style="display:none">$<span>1750</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<tr class="even">
<td class="product-image"><img id="product-image" src="phoneimages/dell_poweredge_t605.png" width="149px" height="200px"></td>
<td class="product-title"><p><b>Enterprise Server</b></p><p>Recommended for 25 or more extensions</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="dell_poweredge_t605"></input></td>
<td class="price-per-pallet" style="display:none">$<span>3943</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr>
<tr class="odd">
<td class="product-image"><img id="product-image" src="phoneimages/dell_poweredge_r200.png"></td>
<td class="product-title"><p><b>Enterprise Server Rack Mount</b></p><p>Recommended for 25 or more extensions</p></td>
<td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="dell_poweredge_r200t"></input></td>
<td class="price-per-pallet" style="display:none">$<span>4943</span></td>
<td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
</tr> -->
<tr style="display:none">
<td colspan="6" style="text-align: right;"><br>
<input type="text" class="total-box" value="$0" id="product-subtotal" disabled="disabled" name="order-subtotal"></input>
</td>
</tr>
</table>
<hr width="100%">
<div class="clear"></div>
<table width="100%">
<tr>
<td width="175px">
<img src="phoneimages/Asterisk-Phone-System-Rack-Mount.jpg">
</td>
<td>
<b>Which Server Grade would you like?</b><br><br>
<input class="server-radio" name="server-radio" type="radio" value="1600"> Standard Server - <i>For offices up to 75 extensions</i></input><br>
<input class="server-radio" name="server-radio" type="radio" value="1800"> Standard Server - <i>Rack Mount</i></input><br>
<input class="server-radio" name="server-radio" type="radio" value="3793"> Enterprise Server - <i>For office over 75 extensions</i></input><br>
<input class="server-radio" name="server-radio" type="radio" value="4793"> Enterprise Server - <i>Rack Mount</i></input><br>
<input class="server-radio" name="server-radio" type="radio" value="1350"> Refurbished Server - <i>For offices with 10 or fewer extensions</i></input>
<input style="display:none" class="server-radio" name="server-radio" type="radio" checked="checked" value="0"> None</input>
</td>
<td rowspan="2">
<div style="text-align: right;">
<span><b>Estimate:</b><br></span>
<input type="text" class="total-box" value="$0" id="order-total" disabled="disabled" name="order-total"></input>
<!-- <br><br>
<div style="float: right;">
<p><b>Your Name:</b><input type="text" name="name" size="50"></p>
<p><b>Your Email:</b><input type="text" name="email"></p>
<p><b>Your Phone:</b><input type="text" name="phone"></p>
<input type="submit" value="Submit Quote" class="submit-order" id="submit-order" name="submit" />
</div> -->
</div>
</td>
</tr>
<tr>
<td colspan="2">
<b>How will your phone system interface with the phone company?</b><br><br>
<input class="equipment-radio" name="equipment-radio" type="radio" value="0" checked="checked" > SIP - <i>Digital, highest quality audio. Requires Business Grade VoIP carrier (Eventis, Popp, Integra, CenturyLink, XO, etc.)</i></input><br>
<input class="equipment-radio" name="equipment-radio" type="radio" value="883.57"> PRI - <i>Most common method of interfacing with T1 carrier (CenturyLink, Comcast)</i></input><br>
<input class="equipment-radio" name="equipment-radio" type="radio" value="758.82"> Analog (4 Lines)</input><br>
<input class="equipment-radio" name="equipment-radio" type="radio" value="1009.72"> Analog (8 Lines)</input><br>
<input class="equipment-radio" name="equipment-radio" type="radio" value="1747.75"> Analog (24 Lines)</input><br>
<input class="equipment-radio" name="equipment-radio" type="radio" value="1000"> Dont Know</input>
</td>
</tr>
</table>
这是我的JS:
// UTILITY FUNCTIONS
function IsNumeric(n) {
return !isNaN(n);
}
function CleanNumber(value) {
// Assumes string input, removes all commas, dollar signs, and spaces
newValue = value.replace(",","");
newValue = newValue.replace("$","");
newValue = newValue.replace(/ /g,'');
return newValue;
}
function CommaFormatted(amount) {
var delimiter = ",";
var i = parseInt(amount);
if(isNaN(i)) { return ''; }
i = Math.abs(i);
var minus = '';
if (i < 0) { minus = '-'; }
var n = new String(i);
var a = [];
while(n.length > 3)
{
var nn = n.substr(n.length-3);
a.unshift(nn);
n = n.substr(0,n.length-3);
}
if (n.length > 0) { a.unshift(n); }
n = a.join(delimiter);
amount = "$" + minus + n;
return amount;
}
// ORDER FORM UTILITY FUNCTIONS
function applyName(klass, numPallets) {
var toAdd = $("td." + klass).text();
var actualClass = $("td." + klass).attr("rel");
$("input." + actualClass).attr("value", numPallets + " pallets");
}
function removeName(klass) {
var actualClass = $("td." + klass).attr("rel");
$("input." + actualClass).attr("value", "");
}
function calcTotalPallets() {
var totalPallets = 0;
$(".num-pallets-input").each(function() {
var thisValue = parseInt($(this).val());
if ( (IsNumeric(thisValue)) && (thisValue != '') ) {
totalPallets += parseInt(thisValue);
};
});
$("#total-pallets-input").val(totalPallets);
}
function calcProdSubTotal() {
var prodSubTotal = 0;
$(".row-total-input").each(function() {
var valString = $(this).val() || 0;
prodSubTotal += parseInt(valString);
});
$("#product-subtotal").val(CommaFormatted(prodSubTotal));
}
function calcShippingTotal() {
var totalPallets = $("#total-pallets-input").val() || 0;
var shippingRate = $("#shipping-rate").text() || 0;
var shippingTotal = totalPallets * shippingRate;
$("#shipping-subtotal").val(CommaFormatted(shippingTotal));
}
function calcOrderTotal() {
var orderTotal = 0;
var productSubtotal = $("#product-subtotal").val() || 0;
var serverPrice = $('.server-radio:checked').val() || 0;
var equipmentPrice = $('.equipment-radio:checked').val() || 0;
var underTotal = $("#under-box").val() || 0;
var orderTotal = parseInt(CleanNumber(productSubtotal)) + parseInt(CleanNumber(serverPrice)) + parseInt(CleanNumber(equipmentPrice));
$("#order-total").val(CommaFormatted(orderTotal));
$("#fc-price").attr("value", orderTotal);
}
// DOM READY
$(function() {
var inc = 1;
$(".product-title").each(function() {
$(this).addClass("prod-" + inc).attr("rel", "prod-" + inc);
var prodTitle = $(this).text();
$("#foxycart-order-form").append("<input type='hidden' name='" + prodTitle + "' value='' class='prod-" + inc + "' />");
inc++;
});
// Reset form on page load, optional
$("#order-table input[type=text]:not('#product-subtotal')").val("");
$("#product-subtotal").val("$0");
$("#shipping-subtotal").val("$0");
$("#fc-price").val("$0");
$("#order-total").val("$0");
$("#total-pallets-input").val("0");
// "The Math" is performed pretty much whenever anything happens in the quanity inputs
$('.num-pallets-input, .server-radio, .equipment-radio').bind("focus blur change keyup", function(){
// Caching the selector for efficiency
var $el = $(this);
// Grab the new quantity the user entered
var numPallets = CleanNumber($el.val());
// Find the pricing
var multiplier = $el
.parent().parent()
.find("td.price-per-pallet span")
.text();
// If the quantity is empty, reset everything back to empty
if ( (numPallets == '') || (numPallets == 0) ) {
$el
.removeClass("warning")
.parent().parent()
.find("td.row-total input")
.val("");
var titleClass = $el.parent().parent().find("td.product-title").attr("rel");
removeName(titleClass);
// If the quantity is valid, calculate the row total
} else if ( (IsNumeric(numPallets)) && (numPallets != '') ) {
var rowTotal = numPallets * multiplier;
$el
.removeClass("warning")
.parent().parent()
.find("td.row-total input")
.val(rowTotal);
var titleClass = $el.parent().parent().find("td.product-title").attr("rel");
applyName(titleClass, numPallets);
// If the quantity is invalid, let the user know with UI change
} else {
$el
.addClass("warning")
.parent().parent()
.find("td.row-total input")
.val("");
var titleClass = $el.parent().parent().find("td.product-title").attr("rel");
removeName(titleClass);
};
// Calcuate the overal totals
calcProdSubTotal();
calcTotalPallets();
calcShippingTotal();
calcOrderTotal();
});
});
答案 0 :(得分:0)
我通常使用此函数将逗号每3位数字放置一次:
function parseThousand(str){
str=str.toString();
return str.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
console.log(parseThousand(parseFloat("1025.9233").toFixed(2)))
确保您的号码有2个或更少的小数位,由toFixed(2)
处理所以在你的代码中:
function parseThousand(str){
str=str.toString();
return str.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
function CommaFormatted(amount) {
var i = parseFloat(amount);
if(isNaN(i)) { return ''; }
var minus = '';
if (i < 0) { minus = '-'; }
var n = parseThousand(i.toFixed(2));
amount = "$" + minus + n;
return amount;
}