JavaScript Cálculos dentro de una tabla HTML

Question

Soy bastante nuevo en JavaScript, así que ni siquiera sé si este es el lenguaje correcto para intentar esto, pero pensé que lo intentaría. He leído varias otras publicaciones y no encuentro algo que realmente me dé una idea de cómo hacer esto, así que estoy preguntando aquí. Los ejemplos que he leído tratan con números y/o selecciones ingresados ​​por el usuario. Pero, voy por una forma estática de cálculo. Ingresé información en la tabla en HTML y JavaScript calcula la información y la envía a una celda de la tabla. Aquí está el código que tengo por la mesa hasta el momento (ya sé que no es exactamente la mejor manera de codificarlo, estoy trabajando en eso, me encontré con este obstáculo):

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

y aquí está la JavaScript que se me ocurre para armar:

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

sé que probablemente estoy realmente mal, pero pensé que iba a tratar de conseguir algo de trabajo antes de pedir ayuda. Básicamente, necesito el script para tomar los valores en la celda "ourPrice" y dividirlos por el valor en la celda "retailPrice" luego restar el total de "1" para dar el porcentaje guardado y luego enviarlo a la celda llamada "yourSavings" ". Espero que tenga sentido. Así que básicamente funciona así:

(1-(ourPrice/retailPrice)) 

Cualquier ayuda es muy apreciada.

Answer 1

El método val es para los elementos de formulario, desee utilizar text para extraer el texto sin formato de sus celdas de la tabla Después hay que convertirlo en algo que los programas de análisis de números comprenderán mediante la eliminación de la no numérico cosas prefijo:.

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

también tenga en cuenta que desea parseFloat en lugar de parseInt ya que se trata de valores no enteros. Y desea restar, no agregar, para obtener los ahorros.

También necesitará un id en la célula que usted está apuntando, el selector está utilizando está en busca de un elemento <yourSavings> y no hay tal cosa:

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

y se le desee seleccionar la <font> el interior que:

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

lo tanto, su última JavaScript debe ser algo como esto:

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

Formatear el savings y convertirlo a un porcentaje se deja como un ejercicio para el lector.

Y un ejemplo vivo: http://jsfiddle.net/ambiguous/bn7Wg/

Answer 2

Parece que está intentando escribir Excel como HTML y JavaScript que se ejecuta en el navegador.

Creo que vale la pena aprender jQuery. Es un marco de JavaScript para manipular el DOM de John Resig. Es uno de los mejores software jamás escritos por un individuo, y todos los desarrolladores web lo utilizan hoy en día.

Answer 3

que tenía que hacer algunas modificaciones a su código original, pero probar este (me llevó a cabo el formato y los caracteres $ para obtener los cálculos para trabajar:

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

Answer 4

por lo que suena como que tiene un buen comienzo. Lo que probablemente más necesita es una forma consistente y confiable de obtener el valor numérico de las celdas. Una cosa que definitivamente recomendaría en este tren de ideas es reducir la cantidad de estilo HTML heredado que está haciendo en línea. Las etiquetas <font> y similares vinculan la presentación demasiado cerca de la estructura del documento, lo que hace que la relación datos/vista sea difícil de construir y mantener.

Así que vamos a limpiar el código un poco y ver si tenemos una idea más clara:

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

Ajá, ahora tenemos una estructura de documento claro y una buena manera limpia para separar nuestros estilos de nuestro HTML. Con esta fuera del camino podemos centrarnos en los datos y el comportamiento:

(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/ contiene un ejemplo de trabajo del código de seguridad.