我使用money.js和accounting.js进行格式化。该过程是，当页面加载时，它从URL中获取#值（如果有）并将表行中的每个值转换为选定的转换。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/basictable1.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700" rel="stylesheet">
<script type="text/javascript" src="money.js"></script>
<script type="text/javascript" src="accounting.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<!-- Below are the exchange rates and the base currency -->
<script>
fx.base = "USD";
fx.rates = {
"EUR" : 0.745101, // eg. 1 USD === 0.745101 EUR
"GBP" : 0.647710, // etc...
"HKD" : 7.781919,
"CNY" : 8000,
"USD" : 1, // always include the base rate (1:1)
/* etc */
}
var symbols = {
"EUR" : '€',
"GBP" : '£',
"HKD" : 'HK$',
"CNY" : '¥',
"USD" : '$',
}
var currentConversion = "USD";
</script>
<h2>money.js & accounting.js</h2>
<p>On first load of the page, values are returned from the server as shown in the table in USD (US DOLLARS). They should be formatted with javascript (accounting.js) to have the correct decimals
and the correct currency symbol ($).<br><br>
The Correct formatting is as follows: <br><br>
<u>For Column Price:</u><br>
<br>Prices below 1 should be formatted with 6 decimals (e.g. 0.123456)<br>
Prices above 1 should be formatted with 2 decimals (e.g. 1.23)<br><br>
<u>For Column Month & Column Year:</u><br>
Prices should be formatted without decimals (e.g. 98473)<br><br>
</p>
<p>When the toggle is used and a different currency is selected, money.js should be used to calculate the price from the base (USD) to the new price using the exchange rate in
the html page. Also the numbers should be formatted correctly, and the correct symbol for the currency should be added. The value of the dropdown should also be set to the new currency. </p>
<p><a href="http://openexchangerates.github.io/money.js/" target="blank">money.js docs</a></p>
<p><a href="http://openexchangerates.github.io/accounting.js/" target="blank">accounting.js docs</a></p>
<div class="dropdown-currency">
<span class="selected-currency">USD</span> <span class="arrow-down"></span>
<div class="dropdown-content">
<ul class="dropdown-menu" role="menu">
<li><a href="#USD" class="price-toggle" data-currency="usd">USD</a></li>
<li><a href="#CNY" class="price-toggle" data-currency="cny">CNY</a></li>
<li><a href="#EUR" class="price-toggle" data-currency="eur">EUR</a></li>
<li><a href="#GBP" class="price-toggle" data-currency="gbp">GBP</a></li>
<li><a href="#HKD" class="price-toggle" data-currency="hkd">HKD</a></li>
</ul>
</div>
</div>
<table id="table-two-axis" class="two-axis">
<thead>
<tr>
<th>#</th>
<th>FRUITS</th>
<th>PRICE</th>
<th class="invisible">MONTH</th>
<th class="invisible">YEAR</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apples</a></td>
<td>222.22</td>
<td class="invisible"> 2360096267</td>
<td class="invisible"> 21213536108</td>
</tr>
<tr>
<td>2</td>
<td>Pears</td>
<td>333.44</td>
<td class="invisible"> 978984251</td>
<td class="invisible"> 43618713955</td>
</tr>
<tr>
<td>3</td>
<td>Oranges</td>
<td>44.43</td>
<td class="invisible"> 259375189</td>
<td class="invisible">2460278427</td>
</tr>
<tr>
<td>4</td>
<td>Kiwi</td>
<td>0.371500</td>
<td class="invisible"> 160084682</td>
<td class="invisible">6946057745</td>
</tr>
<tr>
<td>5</td>
<td>Tomatoes</td>
<td>15.73</td>
<td class="invisible">118967668</td>
<td class="invisible">1474397171</td>
</tr>
</table>
<script type="text/javascript">
// Separate this function so we can re-use it
function formatCurrencies(desiredConversion, symbol){
// Change selected text in the dropdown
$('.selected-currency').html(desiredConversion);
// Get actual array of children from table tbody : table rows
var table = $('table tbody').children().toArray();
// We loop through tables to actually convert each value
table.forEach(function(tr, key){
var tdAmount = $(tr).children('td:nth-child(3)');
var tdMonth = $(tr).children('td:nth-child(4)');
var tdYear = $(tr).children('td:nth-child(5)');
// Unformat prices first to avoid NaN errors because of delimiters
var price = accounting.unformat(tdAmount.text());
var month = accounting.unformat(tdMonth.text());
var year = accounting.unformat(tdYear.text());
price = fx(price).from(currentConversion).to(desiredConversion);
if(price > 1){
// Two decimal places
tdAmount.html(accounting.formatMoney(price, {
symbol: symbol,
format: "%s %v",
precision: 2
}));
} else {
// Six decimal places
tdAmount.html(accounting.formatMoney(price, {
symbol: symbol,
format: "%s %v",
precision: 6
}));
}
month = fx(month).from(currentConversion).to(desiredConversion);
year = fx(year).from(currentConversion).to(desiredConversion);
tdMonth.html(accounting.formatMoney(month, {symbol: symbol, format: "%s %v", precision: 0}));
tdYear.html(accounting.formatMoney(year, {symbol: symbol, format: "%s %v", precision: 0}));
// Assign the new currentConversion
localStorage.setItem('currentConversion', currentConversion);
currentConversion = desiredConversion;
})
}
$(document).ready(function(){
var href = "";
if (location.href.indexOf("#") != -1) {
href = location.href.substr(location.href.indexOf("#") + 1)
} else {
href = "USD";
}
formatCurrencies(href, symbols[href]);
$('.dropdown-menu li a').click(function(e){
// We get the value of the "data-currency" attribute of the selected item
var desiredConversion = $(this).data('currency').toUpperCase();
var symbol = symbols[desiredConversion]; // Access the symbol by key index of symbols object
formatCurrencies(desiredConversion, symbol);
})
})
</script>
</body>
</html>
适用于Chrome和Firefox。但它在Safari中不起作用。有什么办法可以解决这个问题吗？感谢。