JavaScript Calculations within an HTML table

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.

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/

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.

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);

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.