如何停止innerHtml在表中重复一遍又一遍？

Question

I have made an array with objects that get there info from three different user variables, however on one of these there are many sub variables that i don't want it to repeat itself every time the user presses the select button(which updates the table) instead i want it to just add onto (or take away) from the sections that it already has in the table. thanks(if you need the variable code let me know) I have been trying to solve thi for a while now! please help!!

//creating array
var gProducts = new Array();
var gTotalCost = 0;



// Adding Products to array gProducts
    function addProduct
{
var product = new Object();
product.name = name;
product.cost = cost;
gProducts.push(product);
gTotalCost += parseInt(cost)
}


 //Getting products from array, use of for in loop setting new table rows in blank var for each array item
function renderProducts()
{
var HTMLadd = ""

for (var i in gProducts)
{
if( gProducts[i].cost > 0){
    HTMLadd = HTMLadd + 
    "<tr>"+ 
    "<td class='tableSettings00' id=tableRow2 >" + gProducts[i].name +
    "</td>"+
    "<td class='tableSettings'>€<span id=tableRow2part2>" + gProducts[i].cost +
    "</span></td>"+ 
    "</tr>";
    }
    else 
    {
    }
}
document.getElementById('tableRow').innerHTML = HTMLadd;

}

Answer 1

You're using a for in loop, when you probably wanted just a for loop.

Change this line to

for (var i in gProducts)

to

for (var i = 0; i < gProducts.length; i++)

With a for/in loop, the variable i will be an object, and not an integer.