我显示的行数与我的 console.log(tableRef.rows.length) 不匹配
The number of my rows displayed does not match my console.log(tableRef.rows.length)
在我的table中：应该有3行，但根据我的控制台，它显示了5行。如果有人能向我解释一下，我将不胜感激。
这是处理该问题的代码部分：
// adds grand total row function addGrandTRow() {
var tableRef = $("receiptOrders");
var newRow = tableRef.insertRow(-1); // insert new row at the end
var newCell = newRow.insertCell(0); // insert new cell at the end
// Append a text node to the cell
var newText = document.createTextNode("Grand Total");
newCell.appendChild(newText);
var secondCell = newRow.insertCell(-1);
var emptyText= document.createTextNode("");
secondCell.appendChild(emptyText);
secondCell.colSpan = "8";
secondCell.style.backgroundColor = "#eee";
var nthCell = newRow.insertCell(-1);
var grandTotalValue = document.createTextNode($("grandTotal").value);
nthCell.appendChild(grandTotalValue);
grandTotalHolder.push(grandTotalValue); // adds order
console.log("Number of Rows in table: " + tableRef.rows.length);
}
// if errors JavaScript will stop running
"use strict";
// returns a html element (id)
var $ = function(id) {
return document.getElementById(id);
};
var amt = 0;
var temp = document.getElementsByName("temp"); // gets temperature radio button
var totalCoffeeCost = 0;
var latteFlavors; // latte Flavors
var coffeeName; // coffee names
var itemNumber;
// arrays
var namesInputsHolder =[]; // holds each customer's name
var coffeeTypeNamesHolder = []; // holds each coffee type
var coffeeSizeCostsHolder = []; // holds each coffee size amount
var coffeeCosts = [2.25, 2.50, 2.25, 2.75, 4.00]; // costs of each coffee type
var coffeeCostsHolder = []; // holds each coffee costs
var taxRateHolder = []; // holds each customer's tax rate
var coffeeTempHolder =[]; // holds each customer's hot/cold cost
var subtotalHolder = []; // holds each customer's subtotal
var taxAmountHolder = []; // holds each customer's tax amount
var orders = []; // holds each customer's order
var orderTotalHolder = []; // holds each customer's order total
var grandTotalHolder = []; // holds grand total for all customers
var itemNumberHolder = []; // holds item number
function init() {
var allSelect = document.getElementsByTagName("select");
// onchange event for all selects coffeeType, coffeeSize, latteType
for (var i = 0; i < allSelect.length; i++)
{
allSelect[i].onchange = processOrder; // calls function
}
var allRadio = document.getElementsByTagName("input");
// onchange event for all radio buttons
for (var j = 0; j < allRadio.length; j++)
{
allRadio[j].onchange = processOrder; // calls function
}
}
var processOrder = function() {
// declaring local variables
var taxRate;
var citySelected; // for console log purpose only
var coffeeSize = $("coffeeSize").value; // gets id: coffeeSize value from HTML page
var orderCost;
var amt = 0;
var coffee = parseInt($("coffeeType").value); // gets id: coffeeType value from HTML page
coffeeType(coffee); // calls function
// radio buttons
if ($("s").checked) {
taxRate = .087; // if Glendale, tax rate: 8.7%
} else if ($("ph").checked) {
taxRate = .077; // if Phoenix, tax rate: 7.7%
} else {
taxRate = .09; // if Peoria, tax rate: 9%
}
// shows output
$("subtotal").value = coffeeDesc(coffeeSize,temp); //calls the coffeeDesc function
$("tax").value = ($("subtotal").value * taxRate).toFixed(2); // 2 decimals
orderCost = parseFloat($("subtotal").value) + parseFloat($("tax").value);
$("orderCost").value = orderCost.toFixed(2); // 2 decimals
// substitutes Grandtotal (default) with new text
var grandT = $("grandT");
grandT.innerHTML = "Grand Coffee Total $";
}
// matches each coffee type to each price
// gets amount
var coffeeType = function(inCoffee) {
switch(inCoffee) {
case "#":
amt = 0;
break;
case 0:
amt = coffeeCosts[0]; // Hazelnut 2.25
break;
case 1:
amt = coffeeCosts[1]; // Decaf 2.50
break;
case 2:
amt = coffeeCosts[2]; // Regular 2.25
break;
case 3:
amt = coffeeCosts[3]; // Americano 2.75
break;
case 4:
amt = coffeeCosts[4]; // Latte 4.00
break;
}
return amt;
};
// matches each coffee type to each price
// gets name for receipt purposes
var coffeeTypeName = function(inCoffee) {
switch(inCoffee) {
case "#":
return "N/A";
break;
case 0:
return "Hazelnut"; // Hazelnut 2.25
break;
case 1:
return "Decaf"; // Decaf 2.50
break;
case 2:
return "Regular"; // Regular 2.25
break;
case 3:
return "Americano"; // Americano 2.75
break;
case 4:
return "Latte"; // Latte 4.00
break;
}
};
// anonymous (no name) coffeeDesc function
var coffeeDesc = function (inCoffeeSize,inTemp) {
// declare and assign variables
var inTemp = document.getElementsByName("temp");
var subtotal;
var tempCost = 0;
// coffee size dropdown menu
if (inCoffeeSize == "#") {
amt + 0;
} else if (inCoffeeSize == "xLarge") { // extra large
amt += 1.00;
} else { // everything else: small, medium, large
amt += .50;
}
// radio coffee temperature buttons
if (inTemp[1].checked) { // if cold: $.20, if hot: $.0 (default)
tempCost = .20;
}
subtotal = amt + tempCost;
subtotal = subtotal.toFixed(2); // 2 decimals
return subtotal;
}
// calculates total cost
var grandTotalCalc = function() {
var total = 0;
var order = parseFloat($("orderCost").value); // // gets id: orderCost value from HTML page
/* "length property is used as the index of a new element.
Since this property will always be 1 more than the highest index used in the array,
this adds the new element at the end of the array" (Murach 102) */
orders[orders.length] = order; // adds each order cost to the orders array
// for loop: each time through the loop, the array element is added to the total variable
// cnt increases each time the code block in the loop has been executed
for (var cnt = 0; cnt < orders.length; cnt++) {
total = total + orders[cnt]; //cnt retrieves each element from the array
}
// displays output
$("grandTotal").value = total.toFixed(2); // 2 decimals
receipt(); // calls function
}
// table to display list
var receipt = function() {
var nameInput = $("nameInput").value; // gets id: name value from HTML page
var coffee = parseInt($("coffeeType").value); // gets id: coffeeType value from HTML page
var coffeeSize = $("coffeeSize".value); // gets id: coffeeType value from HTML page
var cityName = document.getElementsByName("cityCode");
var inTemp = document.getElementsByName("temp");
var totalList = "";
var coffeeC = coffeeType(coffee); // calls the function
coffeeC = coffeeC.toFixed(2); // 2 decimals
var sizeCost;
var tempCost;
var taxRate;
var subtotal = parseFloat($("subtotal").value);
subtotal = subtotal.toFixed(2); // 2 decimals
var tax = parseFloat($("tax").value);
var order = parseFloat($("orderCost").value);
var grandTotal = parseFloat($("grandTotal").value);
grandTotal = grandTotal.toFixed(2); // 2 decimals
// coffee size dropdown menu
if (coffeeSize == "xLarge") { // extra large
sizeCost = 1.00;
sizeCost = sizeCost.toFixed(2);
} else { // everything else: small, medium, large
sizeCost = .50;
sizeCost = sizeCost.toFixed(2);
}
// radio city tax rate buttons
if (cityName[0].checked) {
taxRate = .087; // if Glendale, tax rate: 8.7%
taxRate = taxRate.toFixed(3);
} else if (cityName[1].checked) {
taxRate = .077; // if Phoenix, tax rate: 7.7%
taxRate = taxRate.toFixed(3);
} else {
taxRate = .09; // if Peoria, tax rate: 9%
taxRate = taxRate.toFixed(2);
}
// radio coffee temperature buttons
if (inTemp[1].checked) { // if cold: $.20, if hot: $.0 (default)
tempCost = .20;
tempCost = tempCost.toFixed(2);
} else {
tempCost = 0;
}
// adds new item to the end of the array using push method
namesInputsHolder.push(nameInput); // adds name
coffeeTypeNamesHolder.push(coffeeTypeName(coffee)); // adds coffee type
coffeeSizeCostsHolder.push(sizeCost); // adds coffee size amount
coffeeCostsHolder.push(coffeeC); // adds coffee type cost
coffeeTempHolder.push(tempCost); // adds hot/cold cost
taxRateHolder.push(taxRate); // adds tax rate cost
subtotalHolder.push(subtotal); // adds subtotal cost
taxAmountHolder.push(tax); // adds tax amount
orderTotalHolder.push(order); // adds order
// i retrieves each element from the array
for (var i = 0; i < namesInputsHolder.length; i++) {
totalList += "<tr><td>" + (i+1) + "</td><td>" + namesInputsHolder[i] + "</td><td>" + coffeeTypeNamesHolder[i] + "</td><td>" + coffeeSizeCostsHolder[i] + "</td><td>" + coffeeCostsHolder[i] + "</td><td>" + coffeeTempHolder[i] + "</td><td>" + taxRateHolder[i] + "</td><td>" + subtotalHolder[i] + "</td><td>" + taxAmountHolder[i] + "</td><td>" + orderTotalHolder[i] + "</td></tr>"+ "<tr><tr>";
}
var stringTitle = "<tr><th>Order Number</th><th>Name</th><th>Type of Coffee</th><th>Coffee Size Amount</th><th>Coffee Cost</th><th>Hot: 0/Cold\.20</th><th>Tax Rate</th><th>Subtotal</th><th>Tax Amount</th><th>Order Total</th></tr>";
$("receiptOrders").innerHTML = stringTitle + totalList;
addGrandTRow(); // calls function
};
var showReceipt = function() {
var hiddenReceipt = document.getElementsByClassName("hiddenReceipt");
// displays each order
hiddenReceipt[0].style.display = "block"; // displays receipt header
$("receiptOrders").style.display = "block";
$("placeOrder").disabled = true;
$("receipt").disabled = true;
}
// adds grand total row
function addGrandTRow() {
var tableRef = $("receiptOrders");
var newRow = tableRef.insertRow(-1); // insert new row at the end
var newCell = newRow.insertCell(0); // insert new cell at the end
// Append a text node to the cell
var newText = document.createTextNode("Grand Total");
newCell.appendChild(newText);
var secondCell = newRow.insertCell(-1);
var emptyText= document.createTextNode("");
secondCell.appendChild(emptyText);
secondCell.colSpan = "8";
secondCell.style.backgroundColor = "#eee";
var nthCell = newRow.insertCell(-1);
var grandTotalValue = document.createTextNode($("grandTotal").value);
nthCell.appendChild(grandTotalValue);
grandTotalHolder.push(grandTotalValue); // adds order
console.log("Number of Rows in table: " + tableRef.rows.length);
}
window.onload = function() {
$("placeOrder").onclick = grandTotalCalc; // calls function
$("nameInput").focus(); // places cursor in name field
init(); // calls function
$("receipt").onclick = showReceipt; // calls function
}
#placeOrder {
margin-left: -15px;
}
/* receipt heading hidden */
h3.hiddenReceipt {
display: none;
}
/* receipt hidden */
#receiptOrders {
display: none;
}
table, th, td {
border-collapse: collapse;
text-align: center;
}
th {
background-color: #dcedec;
border: 1px solid #aaa;
padding: .2em;
}
td {
background-color: #eee;
border: 1px solid #aaa;
padding: .3em;
}
/* Grand Total cell */
tr:last-child td:first-child {
background-color: #f7f6a0;
border: 1px solid #aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Embedded css style -->
<body style="background-color: #c4c7c6; color: #000;font-family: Times New Roman, Times, serif;font-size: 62.5%; position: relative">
<header>
<h1>Test</h1>
</header>
<div class= "container">
<main>
<!--background image-->
<div id="cup"></div>
<br>
<!--Today's Date-->
<div id="todayDate"><br>
</div>
<br>
<form>
<fieldset>
<legend>
Customer's Information
</legend>
<!--asks for name-->
<label for="nameInput">Name</label>
<input type="text" id="nameInput" name="name" placeholder="John Doe" />
<br>
Coffee Order:
<!--asks for coffee type-->
<select name="coffeeType" id="coffeeType">
<option value="#">Select Coffee</option>
<option value="0">Hazelnut</option>
<option value="1">Decaf</option>
<option value="2">Regular</option>
<option value="3">Americano</option>
<option value="4">Latte</option>
</select>
<br>
<!--asks for city-->
<input type="radio" name="cityCode" value="s" id="s" checked> Scottsdale
<input type="radio" name="cityCode" value="ph" id="ph"> Phoenix
<input type="radio" name="cityCode" value="pe" id="pe"> Peoria
<br>
<!--asks for coffee size-->
<select name="coffeeSize" id="coffeeSize">
<option value="#">Select Size</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="xLarge">Extra Large</option>
</select>
<br>
<!--asks for hot or cold-->
<input type="radio" name="temp" value="hot" id="hot" checked> Hot
<input type="radio" name="temp" value="cold" id="cold"> Cold $.20
<br>
<label for="subtotal">Subtotal :</label>
<input type="text" id="subtotal" disabled>
<br>
<label for="tax">Tax :</label>
<input type="text" id="tax" disabled>
<br>
<label for="orderCost">Order Total:</label>
<input type="text" id="orderCost" disabled>
<br>
<label id = "grandT" for="grandTotal">Grand Total:</label>
<input type="text" id="grandTotal" disabled>
<br>
<label> </label>
<input type="button" id="placeOrder" value="Place Order">
<label> </label>
<input type="button" id="receipt" value="Receipt">
<br>
</fieldset>
</form>
<br>
<h3 class = "hiddenReceipt">Receipt</h3>
<br>
<table id = "receiptOrders">
</table>
</main>
<!-- coffee border -->
<div id= "coffeeBean"></div>
<footer>
Footer
</footer>
</div><!-- end .container -->
</body>
计算正确，在这一行：
> // i retrieves each element from the array
for (var i = 0; i < namesInputsHolder.length; i++) ....
....
您在每次迭代中添加 2 行，
在 for 之后，您要在 stringTitle.
中添加一行
在我的table中：应该有3行，但根据我的控制台，它显示了5行。如果有人能向我解释一下，我将不胜感激。
这是处理该问题的代码部分：
// adds grand total row function addGrandTRow() {
var tableRef = $("receiptOrders");
var newRow = tableRef.insertRow(-1); // insert new row at the end
var newCell = newRow.insertCell(0); // insert new cell at the end
// Append a text node to the cell
var newText = document.createTextNode("Grand Total");
newCell.appendChild(newText);
var secondCell = newRow.insertCell(-1);
var emptyText= document.createTextNode("");
secondCell.appendChild(emptyText);
secondCell.colSpan = "8";
secondCell.style.backgroundColor = "#eee";
var nthCell = newRow.insertCell(-1);
var grandTotalValue = document.createTextNode($("grandTotal").value);
nthCell.appendChild(grandTotalValue);
grandTotalHolder.push(grandTotalValue); // adds order
console.log("Number of Rows in table: " + tableRef.rows.length);
}
// if errors JavaScript will stop running
"use strict";
// returns a html element (id)
var $ = function(id) {
return document.getElementById(id);
};
var amt = 0;
var temp = document.getElementsByName("temp"); // gets temperature radio button
var totalCoffeeCost = 0;
var latteFlavors; // latte Flavors
var coffeeName; // coffee names
var itemNumber;
// arrays
var namesInputsHolder =[]; // holds each customer's name
var coffeeTypeNamesHolder = []; // holds each coffee type
var coffeeSizeCostsHolder = []; // holds each coffee size amount
var coffeeCosts = [2.25, 2.50, 2.25, 2.75, 4.00]; // costs of each coffee type
var coffeeCostsHolder = []; // holds each coffee costs
var taxRateHolder = []; // holds each customer's tax rate
var coffeeTempHolder =[]; // holds each customer's hot/cold cost
var subtotalHolder = []; // holds each customer's subtotal
var taxAmountHolder = []; // holds each customer's tax amount
var orders = []; // holds each customer's order
var orderTotalHolder = []; // holds each customer's order total
var grandTotalHolder = []; // holds grand total for all customers
var itemNumberHolder = []; // holds item number
function init() {
var allSelect = document.getElementsByTagName("select");
// onchange event for all selects coffeeType, coffeeSize, latteType
for (var i = 0; i < allSelect.length; i++)
{
allSelect[i].onchange = processOrder; // calls function
}
var allRadio = document.getElementsByTagName("input");
// onchange event for all radio buttons
for (var j = 0; j < allRadio.length; j++)
{
allRadio[j].onchange = processOrder; // calls function
}
}
var processOrder = function() {
// declaring local variables
var taxRate;
var citySelected; // for console log purpose only
var coffeeSize = $("coffeeSize").value; // gets id: coffeeSize value from HTML page
var orderCost;
var amt = 0;
var coffee = parseInt($("coffeeType").value); // gets id: coffeeType value from HTML page
coffeeType(coffee); // calls function
// radio buttons
if ($("s").checked) {
taxRate = .087; // if Glendale, tax rate: 8.7%
} else if ($("ph").checked) {
taxRate = .077; // if Phoenix, tax rate: 7.7%
} else {
taxRate = .09; // if Peoria, tax rate: 9%
}
// shows output
$("subtotal").value = coffeeDesc(coffeeSize,temp); //calls the coffeeDesc function
$("tax").value = ($("subtotal").value * taxRate).toFixed(2); // 2 decimals
orderCost = parseFloat($("subtotal").value) + parseFloat($("tax").value);
$("orderCost").value = orderCost.toFixed(2); // 2 decimals
// substitutes Grandtotal (default) with new text
var grandT = $("grandT");
grandT.innerHTML = "Grand Coffee Total $";
}
// matches each coffee type to each price
// gets amount
var coffeeType = function(inCoffee) {
switch(inCoffee) {
case "#":
amt = 0;
break;
case 0:
amt = coffeeCosts[0]; // Hazelnut 2.25
break;
case 1:
amt = coffeeCosts[1]; // Decaf 2.50
break;
case 2:
amt = coffeeCosts[2]; // Regular 2.25
break;
case 3:
amt = coffeeCosts[3]; // Americano 2.75
break;
case 4:
amt = coffeeCosts[4]; // Latte 4.00
break;
}
return amt;
};
// matches each coffee type to each price
// gets name for receipt purposes
var coffeeTypeName = function(inCoffee) {
switch(inCoffee) {
case "#":
return "N/A";
break;
case 0:
return "Hazelnut"; // Hazelnut 2.25
break;
case 1:
return "Decaf"; // Decaf 2.50
break;
case 2:
return "Regular"; // Regular 2.25
break;
case 3:
return "Americano"; // Americano 2.75
break;
case 4:
return "Latte"; // Latte 4.00
break;
}
};
// anonymous (no name) coffeeDesc function
var coffeeDesc = function (inCoffeeSize,inTemp) {
// declare and assign variables
var inTemp = document.getElementsByName("temp");
var subtotal;
var tempCost = 0;
// coffee size dropdown menu
if (inCoffeeSize == "#") {
amt + 0;
} else if (inCoffeeSize == "xLarge") { // extra large
amt += 1.00;
} else { // everything else: small, medium, large
amt += .50;
}
// radio coffee temperature buttons
if (inTemp[1].checked) { // if cold: $.20, if hot: $.0 (default)
tempCost = .20;
}
subtotal = amt + tempCost;
subtotal = subtotal.toFixed(2); // 2 decimals
return subtotal;
}
// calculates total cost
var grandTotalCalc = function() {
var total = 0;
var order = parseFloat($("orderCost").value); // // gets id: orderCost value from HTML page
/* "length property is used as the index of a new element.
Since this property will always be 1 more than the highest index used in the array,
this adds the new element at the end of the array" (Murach 102) */
orders[orders.length] = order; // adds each order cost to the orders array
// for loop: each time through the loop, the array element is added to the total variable
// cnt increases each time the code block in the loop has been executed
for (var cnt = 0; cnt < orders.length; cnt++) {
total = total + orders[cnt]; //cnt retrieves each element from the array
}
// displays output
$("grandTotal").value = total.toFixed(2); // 2 decimals
receipt(); // calls function
}
// table to display list
var receipt = function() {
var nameInput = $("nameInput").value; // gets id: name value from HTML page
var coffee = parseInt($("coffeeType").value); // gets id: coffeeType value from HTML page
var coffeeSize = $("coffeeSize".value); // gets id: coffeeType value from HTML page
var cityName = document.getElementsByName("cityCode");
var inTemp = document.getElementsByName("temp");
var totalList = "";
var coffeeC = coffeeType(coffee); // calls the function
coffeeC = coffeeC.toFixed(2); // 2 decimals
var sizeCost;
var tempCost;
var taxRate;
var subtotal = parseFloat($("subtotal").value);
subtotal = subtotal.toFixed(2); // 2 decimals
var tax = parseFloat($("tax").value);
var order = parseFloat($("orderCost").value);
var grandTotal = parseFloat($("grandTotal").value);
grandTotal = grandTotal.toFixed(2); // 2 decimals
// coffee size dropdown menu
if (coffeeSize == "xLarge") { // extra large
sizeCost = 1.00;
sizeCost = sizeCost.toFixed(2);
} else { // everything else: small, medium, large
sizeCost = .50;
sizeCost = sizeCost.toFixed(2);
}
// radio city tax rate buttons
if (cityName[0].checked) {
taxRate = .087; // if Glendale, tax rate: 8.7%
taxRate = taxRate.toFixed(3);
} else if (cityName[1].checked) {
taxRate = .077; // if Phoenix, tax rate: 7.7%
taxRate = taxRate.toFixed(3);
} else {
taxRate = .09; // if Peoria, tax rate: 9%
taxRate = taxRate.toFixed(2);
}
// radio coffee temperature buttons
if (inTemp[1].checked) { // if cold: $.20, if hot: $.0 (default)
tempCost = .20;
tempCost = tempCost.toFixed(2);
} else {
tempCost = 0;
}
// adds new item to the end of the array using push method
namesInputsHolder.push(nameInput); // adds name
coffeeTypeNamesHolder.push(coffeeTypeName(coffee)); // adds coffee type
coffeeSizeCostsHolder.push(sizeCost); // adds coffee size amount
coffeeCostsHolder.push(coffeeC); // adds coffee type cost
coffeeTempHolder.push(tempCost); // adds hot/cold cost
taxRateHolder.push(taxRate); // adds tax rate cost
subtotalHolder.push(subtotal); // adds subtotal cost
taxAmountHolder.push(tax); // adds tax amount
orderTotalHolder.push(order); // adds order
// i retrieves each element from the array
for (var i = 0; i < namesInputsHolder.length; i++) {
totalList += "<tr><td>" + (i+1) + "</td><td>" + namesInputsHolder[i] + "</td><td>" + coffeeTypeNamesHolder[i] + "</td><td>" + coffeeSizeCostsHolder[i] + "</td><td>" + coffeeCostsHolder[i] + "</td><td>" + coffeeTempHolder[i] + "</td><td>" + taxRateHolder[i] + "</td><td>" + subtotalHolder[i] + "</td><td>" + taxAmountHolder[i] + "</td><td>" + orderTotalHolder[i] + "</td></tr>"+ "<tr><tr>";
}
var stringTitle = "<tr><th>Order Number</th><th>Name</th><th>Type of Coffee</th><th>Coffee Size Amount</th><th>Coffee Cost</th><th>Hot: 0/Cold\.20</th><th>Tax Rate</th><th>Subtotal</th><th>Tax Amount</th><th>Order Total</th></tr>";
$("receiptOrders").innerHTML = stringTitle + totalList;
addGrandTRow(); // calls function
};
var showReceipt = function() {
var hiddenReceipt = document.getElementsByClassName("hiddenReceipt");
// displays each order
hiddenReceipt[0].style.display = "block"; // displays receipt header
$("receiptOrders").style.display = "block";
$("placeOrder").disabled = true;
$("receipt").disabled = true;
}
// adds grand total row
function addGrandTRow() {
var tableRef = $("receiptOrders");
var newRow = tableRef.insertRow(-1); // insert new row at the end
var newCell = newRow.insertCell(0); // insert new cell at the end
// Append a text node to the cell
var newText = document.createTextNode("Grand Total");
newCell.appendChild(newText);
var secondCell = newRow.insertCell(-1);
var emptyText= document.createTextNode("");
secondCell.appendChild(emptyText);
secondCell.colSpan = "8";
secondCell.style.backgroundColor = "#eee";
var nthCell = newRow.insertCell(-1);
var grandTotalValue = document.createTextNode($("grandTotal").value);
nthCell.appendChild(grandTotalValue);
grandTotalHolder.push(grandTotalValue); // adds order
console.log("Number of Rows in table: " + tableRef.rows.length);
}
window.onload = function() {
$("placeOrder").onclick = grandTotalCalc; // calls function
$("nameInput").focus(); // places cursor in name field
init(); // calls function
$("receipt").onclick = showReceipt; // calls function
}
#placeOrder {
margin-left: -15px;
}
/* receipt heading hidden */
h3.hiddenReceipt {
display: none;
}
/* receipt hidden */
#receiptOrders {
display: none;
}
table, th, td {
border-collapse: collapse;
text-align: center;
}
th {
background-color: #dcedec;
border: 1px solid #aaa;
padding: .2em;
}
td {
background-color: #eee;
border: 1px solid #aaa;
padding: .3em;
}
/* Grand Total cell */
tr:last-child td:first-child {
background-color: #f7f6a0;
border: 1px solid #aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Embedded css style -->
<body style="background-color: #c4c7c6; color: #000;font-family: Times New Roman, Times, serif;font-size: 62.5%; position: relative">
<header>
<h1>Test</h1>
</header>
<div class= "container">
<main>
<!--background image-->
<div id="cup"></div>
<br>
<!--Today's Date-->
<div id="todayDate"><br>
</div>
<br>
<form>
<fieldset>
<legend>
Customer's Information
</legend>
<!--asks for name-->
<label for="nameInput">Name</label>
<input type="text" id="nameInput" name="name" placeholder="John Doe" />
<br>
Coffee Order:
<!--asks for coffee type-->
<select name="coffeeType" id="coffeeType">
<option value="#">Select Coffee</option>
<option value="0">Hazelnut</option>
<option value="1">Decaf</option>
<option value="2">Regular</option>
<option value="3">Americano</option>
<option value="4">Latte</option>
</select>
<br>
<!--asks for city-->
<input type="radio" name="cityCode" value="s" id="s" checked> Scottsdale
<input type="radio" name="cityCode" value="ph" id="ph"> Phoenix
<input type="radio" name="cityCode" value="pe" id="pe"> Peoria
<br>
<!--asks for coffee size-->
<select name="coffeeSize" id="coffeeSize">
<option value="#">Select Size</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="xLarge">Extra Large</option>
</select>
<br>
<!--asks for hot or cold-->
<input type="radio" name="temp" value="hot" id="hot" checked> Hot
<input type="radio" name="temp" value="cold" id="cold"> Cold $.20
<br>
<label for="subtotal">Subtotal :</label>
<input type="text" id="subtotal" disabled>
<br>
<label for="tax">Tax :</label>
<input type="text" id="tax" disabled>
<br>
<label for="orderCost">Order Total:</label>
<input type="text" id="orderCost" disabled>
<br>
<label id = "grandT" for="grandTotal">Grand Total:</label>
<input type="text" id="grandTotal" disabled>
<br>
<label> </label>
<input type="button" id="placeOrder" value="Place Order">
<label> </label>
<input type="button" id="receipt" value="Receipt">
<br>
</fieldset>
</form>
<br>
<h3 class = "hiddenReceipt">Receipt</h3>
<br>
<table id = "receiptOrders">
</table>
</main>
<!-- coffee border -->
<div id= "coffeeBean"></div>
<footer>
Footer
</footer>
</div><!-- end .container -->
</body>
计算正确，在这一行：
> // i retrieves each element from the array
for (var i = 0; i < namesInputsHolder.length; i++) ....
....
您在每次迭代中添加 2 行，
在 for 之后，您要在 stringTitle.