显示的行数与我的console.log（tableRef.rows.length）不匹配

Question

在我的表中：应该有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);

}

＆＃13;

＆＃13;

// 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
    
}

＆＃13;

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

＆＃13;

<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&nbsp;&nbsp;$.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>&nbsp;</label>
    <input type="button" id="placeOrder" value="Place Order">
    
    <label>&nbsp;</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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是正确的，在这一行：

> // i retrieves each element from the array
  for (var i = 0; i < namesInputsHolder.length; i++) ....
....

你在每次迭代中添加2行， 在for之后，您在stringTitle中添加了一行。