JavaScript Calculations within an HTML table

Question

I'm pretty new to JavaScript, so I don't even know if this is the correct language to attempt this, but I figured that I would try. I've read several other posts and I'm not finding something that's really giving me an idea on how to do this, so I'm asking here. The examples I've read through all deal with user-inputted numbers and/or selections. But, I'm going for a static way of calculation. I input in information into the table in HTML and the JavaScript calculates the information and outputs the information to a cell in the table. Here's the code that I have for the table so far (I know it's not exactly the best way to code it, I'm working on that, I just came across this stumbling block):

<table>
<tr><td><font size="2"><strong>Retail Price:</strong></font></td>
<td name = "retailPrice" id="retailPrice"><font size="2"><del>$97.97</del></font></td></tr>

<tr><td><font size="2"><strong>Sale Price:</strong></font></td>
<td><font size="2"><del>$89.97</del></font></td></tr>

<tr><td><font size="3"><strong>Our Price:</strong></font></td>
<td name = "ourPrice" id="ourPrice"><font size="3" color="Red">$79.97</font></td></tr>
<tr><td><font size="2"><strong>You Save:</strong></font></td>
<td name = "yourSavings"><font font size="2" color="Red"></font></td></tr></table>

And here's the only javascript that I can think to put together:

<script type="text/javascript" >
$(function(){
var add = parseInt($("#retailPrice").val()) + parseInt($("#ourPrice").val());
$("yourSavings").html(add);
}).keyup();
</script>

I know that I'm probably really wrong, but I thought I'd try to get something to work before asking for help. Basically I need the script to take the values in the cell "ourPrice" and divide it by the value in the cell "retailPrice" then subtract the total from "1" to give the percent saved and then output that to the cell named "yourSavings". I hope that makes sense. So basically it works like this:

(1-(ourPrice/retailPrice))

Any help is very much appreciated.

mu is too short · Accepted Answer · 2011-05-07 21:22:44Z

3

The val method is for form elements, you want to use text to extract the raw text from your table cells. Then you have to turn it into something that the number parsers will understand by removing the non-numeric prefix stuff:

function money_to_number(raw) {
    return parseFloat(raw.replace(/.*\$/, ''));
}

Also note that you want parseFloat rather than parseInt as you're dealing with non-integer values. And you want to subtract, not add, to get the savings.

You'll also need an id on the cell that you're targeting, the selector you're using is looking for an <yourSavings> element and there is no such thing:

<td name = "yourSavings" id="yourSavings">
    <font font size="2" color="Red">
    </font>
</td>

And you'll want to select the <font> inside that:

$("#yourSavings font").html(savings);

So, your final JavaScript should look something like this:

function money_to_number(raw) {
    return parseFloat(raw.replace(/.*\$/, ''));
}

var retail  = money_to_number($('#retailPrice').text());
var ours    = money_to_number($('#ourPrice').text());
var savings = retail - ours;
$("#yourSavings font").html(savings);

Formatting the savings and converting it to a percentage is left as an exercise for the reader.

And a live example: http://jsfiddle.net/ambiguous/bn7Wg/

answered May 7, 2011 at 21:22

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

webdad3 Over a year ago

Nice RegEx. I wish I was better at RegEx it would make things like this a little easier. +1 for the fiddle... I forgot that on mine :(

Michael Over a year ago

@mu is too short When I edit my code to reflect the changes that you've suggested, nothing shows up. I'm running Firefox and have the web developer add-on. It is saying that '$ is not defined'... I have no idea why this is. Any idea? Should the script be in the header? Currently I'm running it right before the table. Does it need to be elsewhere?

mu is too short Over a year ago

@Michael: Are you pulling in the jQuery library? You should have something like script type="text/javascript" src="jquery.js"></script> in your file's <head> element.

Michael Over a year ago

@mu is too short This is where the fun begins because there is no <head> element. I guess to spoil the reason I'm making this in hopes for a way to still work around this, this is for a template on an eBay listing. If I include a <head> tag within the template, eBay won't let me list the item. So, I've been finding all sorts of work arounds to their issue with allowing proper and simple designing. argh... I don't know if that helps... Can I start an HTML file and thus include a <head> tag within a <table> tag? That would be an option if possible. But then I don't know if jQuery would load...

mu is too short Over a year ago

@Michael: Okay, I saw some jQuery at the bottom and figured you had that part already figured out. Can you include <script> tags at all in an EBay listing or is jQuery already available? And you don't have to put <script> tags inside the <head>, you can get away with putting them anywhere before they're used.

|

duffymo · Accepted Answer · 2011-05-07 20:50:49Z

1

Sounds like you're trying to write Excel as HTML and JavaScript that runs in the browser.

I think jQuery would be worth learning. It's a JavaScript framework for manipulating the DOM by John Resig. It's one of the best pieces of software ever written by an individual, and it's used by all web developers today.

answered May 7, 2011 at 20:50

duffymo

310k46 gold badges377 silver badges572 bronze badges

2 Comments

icktoofay Over a year ago

It's quite a sweeping generalization to say jQuery is used by all web developers.

webdad3 Over a year ago

If you look at his original question, it looks like he was trying some jQuery. Your advice is sound but not all will agree with the "used by all..."

webdad3 · Accepted Answer · 2011-05-07 21:14:28Z

I had to do some modifications to your original code but try this (I took out the formatting and the $ signs to get the math to work:

<table>
<tr><td><font size="2"><strong>Retail Price:</strong></font></td>
<td name="retailPrice" id="retailPrice">97.97</td></tr>

<tr><td><font size="2"><strong>Sale Price:</strong></font></td>
<td><font size="2"><del>$89.97</del></font></td></tr>

<tr><td><font size="3"><strong>Our Price:</strong></font></td>
<td name = "ourPrice" id="ourPrice"><font size="3" color="Red">79.97</font></td></tr>
<tr><td><font size="2"><strong>You Save:</strong></font></td>
<td name ="yourSavings" id="yourSavings"></td></tr>
</table>


var rp = $("#retailPrice").text();
var op = $("#ourPrice").text();
var add = parseFloat(rp) - parseFloat(op);    

$("#yourSavings").html(add);

Gabriel · Accepted Answer · 2011-05-07 21:52:45Z

So it sounds like you have a good start. The thing you probably need the most is a consistent and reliable way to get the numeric value out of the cells. One thing I would definitely encourage in this train of thought is to reduce the amount of legacy HTML styling you are doing inline. <font> tags and the like bind the presentation too closely to the document structure, making the data/view relationship difficult to construct and maintain.

So let's clean up the code a little and see if we have a clearer picture:

<style>
  .title {
    font-size : 100%;
    font-weight : bold;
  }
  .big {
    font-size : 120%;
  }
  .sale {
    text-decoration : line-through;
  }
  .our {
    color : red;
  }
  .savings {
    color : red;
  }
</style>
<table>
  <tr>
    <td class="title">Retail Price:</td>
    <td class="price retail" id="retailPrice">$97.97</td>
  </tr>
  <tr>
    <td class="title">Sale Price:</td>
    <td class="price sale" id="salePrice">$89.97</td>
  </tr>
  <tr>
    <td class="big title">Our Price:</td>
    <td class="price our big" id="ourPrice">$79.97</td>
  </tr>
  <tr>
    <td class="title">You Save:</td>
    <td class="savings" id="yourSavings"></td>
  </tr>
</table>

Aha, now we have a clear document structure and a good clean way to separate our styles from our HTML. With this out of the way we can focus on the data and the behavior:

(function(){
// put all your JavaScript in a closure so you don't pollute the global namespace
  function extract_float_from_price ( price ) {
    return parseFloat( price.replace(/\$/,'') );
  }

  function evaluate_savings ( ) {
    var retail = extract_float_from_price( $('#retailPrice').text() ),
        ours = extract_float_from_price( $('#ourPrice').text() );
    $('#yourSavings').text( parseInt( ( 1 - ( ours / retail ) ) * 100 ) + '%' );
  }

  $( evaluate_savings ); // binds to Dom Ready
})()

http://jsfiddle.net/wd66b/ contains a working example of the above code.

Collectives™ on Stack Overflow

JavaScript Calculations within an HTML table

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related