PDA

View Full Version : Currency Values--> nice alignment in table


Scrote
11-07-2003, 11:22 AM
Hey,

Pretty new to JS (used it at Uni for about two weeks...about two years ago), and looking for some advice, if anyone is willing.

I have a script that produces and populates a table with some calculated shipping values. Everything seems to *work* ok, but just cant get it to *look* right. I can't get the ("currency") values in my table line up nice and neat.

eg. $4.9 instead of $4.90 so,

$5.47
$4.9
$0.1
$13.67

starts to look pretty crappy when aligned in a table.

I tried mucking around with this code for awhile (to be used in conjunction with my code):

<script>

/*Parse number to currency format:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free scripts here!
*/

//Remove the $ sign if you wish the parse number to NOT include it
var prefix="$"
var wd
function parseelement(thisone){
if (thisone.value.charAt(0)=="$")
return
wd="w"
var tempnum=thisone.value
for (i=0;i<tempnum.length;i++){
if (tempnum.charAt(i)=="."){
wd="d"
break
}
}
if (wd=="w")
thisone.value=prefix+tempnum+".00"
else{
if (tempnum.charAt(tempnum.length-2)=="."){
thisone.value=prefix+tempnum+"0"
}
else{
tempnum=Math.round(tempnum*100)/100
thisone.value=prefix+tempnum
}
}
}
</script>

but, I couldn't get the results I was after.

I think it's because I dont know what Im doing.

Below is a copy of the (working) code that I have thusfar. I get the feeling that I have more variables and algebra than I need, I'm just happy it works atm.

Also, I have copied some code (the roundit() function) form javascriptkit.com, should I acknowldege them in the code? Afterall, i would hate to break some kinda crazy "coder" ethics .

If you run the code in a browser, then you will quickly see what I mean about the alignments.

I figured that I could acheive the desired effect using html and fixed width tables with some css, but getting the JS right just seems so much more professional :).


Even if somebody could just point me at some useful resources, I would be most grateful.

Thanks for your time and help,

-Scrote

<html>
<body>
<script language="JavaScript1.1" type="text/javascript">
<!--

//Variables - known shipping values
var shi = 1.20;
var env = 0.60;
var top = 0.20;
var sle = 0.05;
var lis = 0.47;

//Functions

//Rounding function that puts me *close* to a currency format

function roundit(Num, Places) {
if (Places > 0) {
if ((Num.toString().length - Num.toString().lastIndexOf('.')) > (Places + 1)) {
var Rounder = Math.pow(10, Places);
var num = Math.round(Num * Rounder) / Rounder;
return Math.round(Num * Rounder) / Rounder;
}
else return Num;
}
else return Math.round(Num);
}

//Creates and populates my table

function shipping () {
var i = 0;
var result = 0;
var status = true;
document.writeln("<table cellpadding=0 cellspacing=0 align=center width=450 align=center><tr><th># Singles Won</th><th>Total Shipping Cost ($US)</th><th>Cost/Card</th></tr>");

while(status){
count = ++i;
var r = Math.round(count/2);
var result = Math.round(r);
var rtop = result * top;
var rsle = result * sle;
var rlis = count * lis;
var total = shi + env + rtop + rsle + rlis;
var perCard = (shi + env + rtop + rsle + rlis)/count;
var roundPerCard = roundit(perCard, 2);
var roundTotal = roundit(total, 2);
document.writeln("<tr align=center><td>" + count + "</td><td>$ " + roundTotal +"</td><td>$ " + roundPerCard + "</td></tr>")
if(i == 200){
status = false;
}
}
document.writeln("</table>");
}
shipping();
// --> </script>

</body>
</html>

Exodious
11-07-2003, 12:23 PM
<html>
<body>
<script language="JavaScript1.1" type="text/javascript">
<!--

//Variables - known shipping values
var shi = 1.20;
var env = 0.60;
var top = 0.20;
var sle = 0.05;
var lis = 0.47;

//Functions

//Rounding function that puts me *close* to a currency format

function roundit(Num, Places) {
if (Places > 0) {
if ((Num.toString().length - Num.toString().lastIndexOf('.')) > (Places + 1)) {
var Rounder = Math.pow(10, Places);
var num = Math.round(Num * Rounder) / Rounder;
return Math.round(Num * Rounder) / Rounder;
}
else return Num;
}
else return Math.round(Num);
}

//Creates and populates my table

function shipping () {
var i = 0;
var result = 0;
var status = true;
document.writeln("<table cellpadding=0 cellspacing=0 align=center border=0 width=450 align=center><tr><th colspan=2># Singles Won</th><th colspan=2>Total Shipping Cost ($US)</th><th colspan=2>Cost/Card</th></tr>");

while(status){
count = ++i;
var r = Math.round(count/2);
var result = Math.round(r);
var rtop = result * top;
var rsle = result * sle;
var rlis = count * lis;
var total = shi + env + rtop + rsle + rlis;
var perCard = (shi + env + rtop + rsle + rlis)/count;
var roundPerCard = roundit(perCard, 2);
var roundTotal = roundit(total, 2);
document.writeln("<tr align=left><td width=25>&nbsp;</td><td>" + count + "</td><td width=30>&nbsp;</td><td>$ " + roundTotal +"</td><td width=25>&nbsp;</td><td>$ " + roundPerCard + "</td></tr>")
if(i == 200){
status = false;
}
}
document.writeln("</table>");
}
shipping();
// --> </script>

</body>
</html>



in each of the width=n columns, u need to put & n b s p ;
unless you only develop in IE, this post actually adds the space

Vladdy
11-07-2003, 12:44 PM
text-align: ".";


http://www.w3.org/TR/REC-CSS2/tables.html#column-alignment

mordred
11-08-2003, 12:33 AM
Seems to have disappeared from the CSS2.1 draft:
http://www.w3.org/TR/CSS21/text.html#propdef-text-align

Anyway, was it actually supported by a browser? My quick tests yielded only negative results, though if it would work, it would be a really nice feature. :)

Scrote
11-08-2003, 11:06 AM
Thanks very much for your help guys!

Exodius, that was some very nifty html :)

I did a bit of a search through some old posts too and found this little gem:


function currency(anynum)
{
//-- Returns passed number as string in $xxx,xxx.xx format.
anynum=eval(anynum)
workNum=Math.abs((Math.round(anynum*100)/100));workStr=""+workNum
if (workStr.indexOf(".")==-1){workStr+=".00"}
dStr=workStr.substr(0,workStr.indexOf("."));dNum=dStr-0
pStr=workStr.substr(workStr.indexOf("."))
while (pStr.length<3){pStr+="0"}

//--- Adds comma in thousands place.
if (dNum>=1000) {
dLen=dStr.length
dStr=parseInt(""+(dNum/1000))+","+dStr.substring(dLen-3,dLen)
}

//-- Adds comma in millions place.
if (dNum>=1000000) {
dLen=dStr.length
dStr=parseInt(""+(dNum/1000000))+","+dStr.substring(dLen-7,dLen)
}
retval = dStr + pStr
//-- Put numbers in parentheses if negative.
if (anynum<0) {retval="("+retval+")"}
return "$ "+retval
}

which now has me happy as a pig in mud.

Cheers,
-Scrote