2012-01-09 118 views
0

我正在研究一個需要計算器功能的項目,並且應該支持通過javascript添加更多值,並且還打印出文檔中所有數字的總和。 輸入的數字必須是兩位數字。空白或非數字數據應該跳過。 這是我到目前爲止有:javascript計算器功能

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Sum Calculator</title> 
</head> 
<body> 
Number of Rows: <input type= text value=2 style="width:30px" maxlength=2 >&nbsp;&nbsp;<input type=button value='Change' onclick="" /> 
<br /><br /> 
<table cellspacing=0 cellpadding=4> 
<tr><td>Number 1:</td><td><input value=20 style="width:30px" type=text maxlength=2/></td></tr> 
<tr><td>Number 2:</td><td><input value=25 style="width:30px" type=text maxlength=2/></td></tr> 
<tr><td style="border-top:solid 1px black;border-bottom:solid 1px black;">Sum:</td><td style="border-top:solid 1px black;border-bottom:solid 1px black;"><div>45</div></td></tr> 
</table> 
<input type=button value='Recalculate Sum' onclick="" /> 
</body> 
</html> 

任何意見,我怎麼能在廣告表的另一行使用JavaScript和計算表中的所有字段的最終結果? 在此先感謝,Laziale

+0

那麼首先起來,你應該知道IE進行寫保護表('COL COLGROUP TABLE TBODY TFOOT THEAD TR'),所以你會發現跨瀏覽器不一致性。尋找一個處理修改表的一部分的JS庫。參見:http://stackoverflow.com/questions/4729644/cant-innerhtml-on-tbody-in-ie – Rudu 2012-01-09 17:51:07

回答

0

其實很簡單。這樣做:

<table cellspacing=0 cellpadding=4> 
    <tbody id="whateverId"> 
     <tr><td>Number 1:</td><td><input value=20 style="width:30px" type=text   maxlength=2/></td></tr> 
     <tr><td>Number 2:</td><td><input value=25 style="width:30px" type=text maxlength=2/></td></tr> 
     <tr><td style="border-top:solid 1px black;border-bottom:solid 1px black;">Sum:</td><td style="border-top:solid 1px black;border-bottom:solid 1px black;"><div>45</div></td></tr> 
    </tbody> 
    </table> 

JS的創建:

var trEl = document.createElement('tr'); 
    trEl.setAttribute('attribute', 'value'); // replace that with what you need 

    var tdEl = document.createElement('td'); 
    // Here set td attributes 
    trEl.appendChild(tdEl); 
    // And same for the input im to lasy to write. 

    document.getElementById('whateverId').appendChild(trEl); 

而且......就是這樣。將它分組爲一個函數或任何你想要的。

對於和你只是這樣做:

var s = 0; 
    for (var i = 0; i < document.getElementById('whateverId').childNodes.length; i++) 
    { 
     s += document.getElementById(whateverId).childNodes[i].firstChild.firstChild.value; // Hope I counted the first childs right.... you get the point. 
    }