2014-04-24 33 views
2

我有一張表,用戶可以根據需要動態添加一行。我需要在表格下方添加一個文本框,以便使用JavaScript動態輸出最後一列的總數。如果計算不能動態完成,那麼我可以在文本框下添加一個計算按鈕。使用動態添加行來計算Javascript

<HTML> 
    <HEAD> 

    <SCRIPT language="javascript"> 
     function addRow(tableID) { 

      var table = document.getElementById(tableID); 

      var rowCount = table.rows.length; 
      var row = table.insertRow(rowCount); 

      var cell1 = row.insertCell(0); 
      var element1 = document.createElement("input"); 
      element1.type = "text"; 
      cell1.appendChild(element1); 

      var cell2 = row.insertCell(1); 
      var element2 = document.createElement("input"); 
      element2.type = "text"; 
      cell2.appendChild(element2); 

     var cell3 = row.insertCell(2); 
      var element3 = document.createElement("input"); 
      element3.type = "text"; 
      cell3.appendChild(element3); 

     var cell4 = row.insertCell(3); 
      var element4 = document.createElement("input"); 
      element4.type = "text"; 
      cell4.appendChild(element4); 

     var cell5 = row.insertCell(4); 
      var element5 = document.createElement("input"); 
      element5.type = "text"; 
      cell5.appendChild(element5); 

     var cell6 = row.insertCell(5); 
      var element6 = document.createElement("input"); 
      element6.type = "text"; 
      cell6.appendChild(element6); 

     var cell7 = row.insertCell(6); 
      var element7 = document.createElement("input"); 
      element7.type = "text"; 
      cell7.appendChild(element7); 
     } 

    function Calculate(tableID) {???? 

    } 

    </SCRIPT> 
    </HEAD> 
    <BODY> 
<table id="dataTable"> 
<tr><td><input type="button" value="Add Row" onclick="addRow('dataTable')"/></td></tr> 
<tr><td>Class Description</td><td>Class Code</td><td>Rate</td><td>Other</td><td>Final Rate</td><td>Exposure</td><td>Premium</td></tr> 
<tr><td><input type="text"/></td><td><input style="width:80px" type="text"/></td><td><input style="width:50px" type="text"/></td><td><input style="width:50px" type="text"/></td><td><input style="width:80px" type="text"/></td><td><input style="width:80px" type="text"/></td><td><input style="width:90px" type="text"/></td></tr> 
</table> 
//Text box output total of Premium 
</BODY> 
</HTML> 

任何幫助將不勝感激。

回答

2

的答案是在小提琴提供的,你需要遍歷所有的輸入和計算領域:

function Calculate(tableID) { 
var inputs = document.querySelectorAll("#" + tableID + " input"); 
var total = 0; 
for (var i = 0; i < inputs.length; i++) { 
    if (!isNaN(parseInt(inputs[i].value))) { 
     total += parseInt(inputs[i].value); 
    } 
} 
alert(total) 
} 

http://jsfiddle.net/KK47L/

可以使用計算功能,並反映在另一個DIV結果/電池/警報。

+1

請始終使用radix參數:'parseInt(x,10)'。來自Mdn:'如果輸入字符串以「0」開始,則基數爲八(八進制)或十(十進制)。究竟選擇哪個基數是依賴於實現的。 ECMAScript 5指定使用10(十進制),但並非所有瀏覽器都支持此功能。出於這個原因,當使用parseInt時總是指定一個基數。「 –

+0

工程,但OP說它應該計算最後一列,而不是每一行。 – martincarlin87

+0

究竟需要計算什麼? –