Geek Answers Handbook

JavaScript calculations in an HTML table

I'm new to JavaScript, so I don’t even know if this is the right language, but I decided I would try it. I read a few other posts and I do not find what really gives me an idea of ​​how to do this, so I ask here. The examples I read relate to user-entered numbers and / or choices. But I'm going to make a static way of calculating. I entered information into a table in HTML, and JavaScript calculates the information and displays the information in a cell in the table. Here is the code that I have for the table so far (I know that this is not the best way to encode it, I am working on it, I just stumbled upon 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 is the only javascript I can think of:

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

, , , , , - , . script, "ourPrice" "retailPrice", "1", "yourSavings". , . :

(1-(ourPrice/retailPrice))

.

+5
4

val , text, . -, , :

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

, parseFloat, parseInt, . , , .

id , . , , <yourSavings>, :

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

<font> :

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

, JavaScript :

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

savings .

: http://jsfiddle.net/ambiguous/bn7Wg/

+3

, Excel HTML JavaScript, .

, jQuery . JavaScript DOM . , - , - .

+1

, ( $, :

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

, , . , , , , - . , , , HTML, inline. <font> .. , data/view.

, , :

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

, HTML. :

(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/ .

+1
source

More articles:


All Articles