Question

这是针对正在进行的项目。我需要创建一个计算，从表中的'off列'中的'total'行中获取数字，然后从输入框中定义的起始余额中减去它。然后，当单击提交按钮时，需要在警告框中显示此计算的结果。

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

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/

Answer 1

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

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

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

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

1 个答案: