Javascript：从动态 Javascript 表和输入框中获取数值然后进行计算答案

【问题标题】：Javascript: Get number values from dynamic Javascript table and Input box then do calculationJavascript：从动态 Javascript 表和输入框中获取数值然后进行计算
【发布时间】：2012-11-15 10:41:44
【问题描述】：

这是一个正在进行的项目。我需要创建一个计算，该计算将从表中“关闭列”中的“总计”行中获取数字，然后从输入框中定义的起始余额中减去该数字。当点击提交按钮时，这个计算的结果需要显示在一个警告框中。

这有点超出我的能力，如果有人能指出我正确的方向，我将不胜感激。

HTML：

<!DOCTYPE html>
<html>
<head>
   <h1><em>EXPENSES CALCULATOR</em></h1>
   <link rel="stylesheet" type="text/css" href="tt.css"/>
</head>
<body>
   <p id="balance">Starting balance (£)<input type="number"></p>
   <p>
      <input type="button" id="addNewRow" value="Add new row">
      <input type="button" onClick="window.print()" value="Print your purchases"/>
   </p>
   <table id="breakdowntable">
   <tr>
        <th>Payment type</th>
        <th>Off</th>
        <th>To come off</th>
        <th>Total</th>
   </tr>
   <tr id="card">
       <th>Card Payment</th>
       <td>0</td>
       <td>0</td>
       <td id="cardtotal">0</td>
   </tr>
   <tr id="cash">
       <th>Cash Payment</th>
       <td>0</td>
       <td>0</td>
       <td id="cashtotal">0</td>
   </tr>
   <tr id="other">
       <th>Other Payment</th>
       <td>0</td>
       <td>0</td>
       <td id="othertotal">0</td>
   </tr>
   <tr id="total">
       <th>Total</th>
       <td>0</td>
       <td>0</td>
       <td>0</td>
   </tr>
   </table>
   <table id="purchases"> </table>
   <p><input type="Submit" id="submit" onclick='alert(money_to_number())'> </p>
   <script type="text/javascript" src="tt.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">   </script>
</body>
</html>

JavaScript：

var doc = document;
function calculateAmount() {
var purchases = doc.getElementById('purchases');
var purchasesRows = purchases.rows;
var typeValue = {'CP' : [0,0], 'CA' : [0,0], 'OP' : [0,0]};
for (var i = 0, purchasesRowsLength = purchasesRows.length, pytType, inputs, isItOffInput, isItOff; i < purchasesRowsLength; ++i) {
    pytType = purchasesRows[i].getElementsByTagName('SELECT')[0];
    inputs = purchasesRows[i].getElementsByTagName('INPUT');
    isItOffInput = inputs[0];
    isItOff = inputs[inputs.length - 1].checked ? 0 : 1;
    typeValue[pytType.value][isItOff] += isItOffInput.value - 0;
}



var total = [0, 0];

var cardCells = doc.getElementById('card').cells;
cardCells[1].innerHTML = typeValue['CP'][0];
total[0] += typeValue['CP'][0];
cardCells[2].innerHTML = typeValue['CP'][1];
total[1] += typeValue['CP'][1];
cardCells[3].innerHTML = typeValue['CP'][0] + typeValue['CP'][1];

var cashCells = doc.getElementById('cash').cells;
cashCells[1].innerHTML = typeValue['CA'][0];
total[0] += typeValue['CA'][0];
cashCells[2].innerHTML = typeValue['CA'][1];
total[1] += typeValue['CA'][1];
cashCells[3].innerHTML = typeValue['CA'][0] + typeValue['CA'][1];

var otherCells = doc.getElementById('other').cells;
otherCells[1].innerHTML = typeValue['OP'][0];
total[0] += typeValue['OP'][0];
otherCells[2].innerHTML = typeValue['OP'][1];
total[1] += typeValue['OP'][1];
otherCells[3].innerHTML = typeValue['OP'][0] + typeValue['OP'][1];

var totalCells = doc.getElementById('total').cells;
totalCells[1].innerHTML = total[0];
totalCells[2].innerHTML = total[1];
totalCells[3].innerHTML = total[0] + total[1];
}

function addNewRow() {
var purchases = doc.getElementById('purchases');
var row = purchases.insertRow(purchases.rows.length);
var pytTypeCell = row.insertCell(0);
var type = [['CP', 'Paid by Card £'], ['CA', 'Paid with Cash £'], ['OP', 'Other Payment     type £']];
var pytType = doc.createElement('SELECT');
for (var i = 0, typeLength = type.length, option; i < typeLength; ++i) {
    option = doc.createElement('OPTION');
    option.value = type[i][0];
    option.innerHTML = type[i][1];
    pytType.appendChild(option);


}

pytType.onchange = calculateAmount;
var pytTypeLabel = doc.createElement('LABEL');
pytTypeLabel.innerHTML = 'Type';
pytTypeLabel.appendChild(pytType);
pytTypeCell.appendChild(pytTypeLabel);
var isItOffInput = doc.createElement('INPUT');
isItOffInput.type = 'number';
isItOffInput.onkeyup = calculateAmount;
pytTypeCell.appendChild(isItOffInput);

var descriptInputCell = row.insertCell(1);
var descriptInput = doc.createElement('INPUT');
descriptInput.type = 'number';
var descriptLabel = doc.createElement('LABEL');
descriptLabel.innerHTML = 'Description';
descriptLabel.appendChild(descriptInput);
descriptInputCell.appendChild(descriptLabel);

var dateInputCell = row.insertCell(2);
var dateInput = doc.createElement('INPUT');
dateInput.type = 'date';
var dateLabel = doc.createElement('LABEL');
dateLabel.innerHTML = 'Payment Date';
dateLabel.appendChild(dateInput);
dateInputCell.appendChild(dateLabel);

var isItOffCheckBoxCell = row.insertCell(3);
var isItOffCheckBox = doc.createElement('INPUT');
isItOffCheckBox.type = 'checkbox';
isItOffCheckBox.onclick = calculateAmount;
var isItOffLabel = doc.createElement('LABEL');
isItOffLabel.appendChild(isItOffCheckBox);
isItOffLabel.appendChild(document.createTextNode('Is it Off?'));
isItOffCheckBoxCell.appendChild(isItOffLabel);

}
doc.getElementById('addNewRow').onclick = addNewRow;
window.onload = function() {
addNewRow();
};

在 jsFiddle 中： http://jsfiddle.net/jfBAJ/

【问题讨论】：

见api.jquery.com/submit
你的问题到底是什么？并考虑在这里制作 jsfiddle：jsfiddle.net
我已经添加了 jsfiddle。我的问题是我不知道如何进行这个计算。
尽量简化和澄清你的问题。真的，我无法理解它，我无法遵循所有这些代码。这是我自己的想法。但是，我希望有人能够帮助您。
抱歉，我希望这更清楚。我试图从表格中的特定单元格中获取一个数字，然后从起始余额中减去它。当点击提交按钮时，这个计算需要显示在一个警告框中。

标签： javascript jquery html-table

【解决方案1】：

您需要为以后要查找的元素提供 ID。我给你的起始余额输入了id“starting_balance”，我给你的总TD输入了“grand_total”的id，然后在提交时写了以下内容：

document.getElementById("submit").onclick = onSubmit
function onSubmit(){
    var starting = document.getElementById("starting_balance").value;
    var grandTotal =  document.getElementById("grand_total").innerHTML;
    var finalBalance =parseFloat(grandTotal||0) + parseFloat(starting||0);
    alert(finalBalance);
}

这会提醒新的总数 + 起始余额。

【讨论】：