如何停止一个一遍又一遍重复的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) please help!! i really need a solution!!

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

In the loop you always iterate through the whole gProducts , hence the values already placed to the table are doubled every time you execute the function.

This example uses some methods in HTMLTableElement to create new rows and cells. It also has a counter ( index ) holding the starting position of each iteration.

var index = 0; // Counter for holding the current position in gProducts

function renderProducts () {
    var n, row, cell, span;        
    for (n = index; n < gProducts.length; n++) { // Start looping from the first new index in gProducts
        if (gProducts[n].cost > 0) {
            row = table.insertRow(-1); // Inserts a row to the end of table
            cell = row.insertCell(-1); // Inserts a cell to the end of the newly-created row
            cell.className = 'tableSettings00'; // Sets class for the cell
            cell.id = 'tableRow' + index; // Sets an unique id for the cell
            cell.innerHTML = gProducts[n].name; // Sets the content for the cell
            cell = row.insertCell(-1); // Create another cell to row
            cell.className = 'tableSettings';
            cell.id = 'tableRowPart' + index;
            cell.innerHTML = '€';
            span = document.createElement('span'); // Creates an empty span element
            span.id = 'tableRow2part' + index; // Sets an unique id for span
            span.appendChild(document.createTextNode(gProducts[n].cost)); // Appends some text to the span
            cell.appendChild(span); // Appends the span to the cell
        }
    }
    index = n; // Sets counter equal to the length of gProducts
}

A live demo at jsFiddle .

As a sidenote, personally I prefer not to use id s for elements within a table. If id s are needed, you probably have constructed your table incorrectly, or the data is not suitable being shown in a table.

You can use indices and table.rows and rows.cells collections to find cells, and if some elements has to be searched for from a cell, use firstElementChild and nextElementSibling properties of a cell to find them.