HTML表格中的JavaScript計算

Question

我對JavaScript非常陌生，所以我甚至不知道這是否是正確的語言來嘗試此操作，但我想我會嘗試。我已經閱讀了其他幾篇文章，但是我沒有找到真正給我一個關於如何做到這一點的想法，所以我在這裏問。我讀過的所有例子都是用戶輸入的數字和/或選擇。但是，我正在尋找一種靜態的計算方法。我將信息輸入到HTML中的表格中，JavaScript計算信息並將信息輸出到表格中的單元格。下面是我對迄今表的代碼（我知道這是不完全的代碼的最佳方式，我的工作，我只是碰到這種絆腳石傳來）：

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

而這裏的只有JavaScript，我能想到放在一起：

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

我知道，我可能真的錯了，但我想我會嘗試得到的東西尋求幫助之前的工作。基本上我需要腳本來獲取單元格「ourPrice」中的值，並將其除以單元格「retailPrice」中的值，然後從「1」中減去總數以給出保存的百分比，然後將其輸出到名爲「yourSavings 」。我希望這是有道理的。所以基本上它是這樣的：

(1-(ourPrice/retailPrice)) 

任何幫助非常感謝。

Answer 1

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

Answer 2

聽起來就像你正試圖將Excel編寫成在瀏覽器中運行的HTML和JavaScript一樣。

我認爲jQuery值得學習。這是一個由John Resig操縱DOM的JavaScript框架。它是個人曾經寫過的最好的軟件之一，現在所有的Web開發者都使用它。

Answer 3

我不得不做一些修改原來的代碼，但試試這個（我拿出格式和$符號來得到數學工作：

<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

所以，它聽起來就像你有一個良好的開端。您可能最需要的是將數值從單元格中取出的一致且可靠的方法。在這一系列思路中，我肯定會鼓勵的一件事是減少內聯HTML樣式的數量。 <font>標籤等將演示文稿過於緊密地綁定到文檔結構，使得難以構建和維護數據/視圖關係。

所以讓我們清理代碼一點，看看我們是否有一個更清晰的畫面：

<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/包含上述代碼的工作示例。