如何防止Javascript更新整个控件，并刷新内容？

Question

我有这样的代码：

function addFormControls() {
    var e = document.getElementById("ProductsList");
    var prodid = e.options[e.selectedIndex].value;
    var prodvalue = e.options[e.selectedIndex].text;
    if (num == 0) {
        document.getElementById("ProductsPanel").innerHTML = '<h3>Products added to Variant</h3>';
    }
    if (num < 10) {
        var boolCheck = checkArrayData(prodid);
        if (boolCheck == false) {
            document.getElementById("ProductsPanel").innerHTML = document.getElementById("ProductsPanel").innerHTML + prodvalue + '<input type="text" id="' + prodid + 'product" value="0" width="50px" maxlenght="2" /><input type="button" onclick="updateArrayData(\'' + prodid + '\', document.getElementById(\'' + prodid + 'product\').value);" value="Update Number" /><br />';
            num++;
            prodIdArray.push({
                'key': prodid,
                'value': prodvalue,
                'num': 0
            });
            document.getElementById("productsArray").value = prodIdArray;
        } else {
            alert("Sorry product has already been added!");
        }
    }
}

这会愉快地用新信息更新div标记，但是，如果您查看它将文本框打印到屏幕的部分，第13行，这些文本框将由用户更新。

因此，简而言之，添加了文本框并更新了值。

但是，如果有一个值为5的textbox，那么再次调用此函数来添加另一个textbox，之前的textbox的值将被清除！

那么，我如何防止这种情况，我是否必须做一些，循环在div控件上获取值，然后在调用此函数后将它们放回原处？！？

Answer 1

在添加控件之前，我创建了一些javascript来保存特定输入的value字段中的所有值，然后将所有保存的值返回给它们所尊重的输入。

    function saveValuesOfProducts()
{
    // initialise the array
    numOfProds = new Array();
    // get all the elements which are inputs
    var x=document.getElementsByTagName("input");
    // remove all un necessary inputs
    x = leaveTextInputs(x);
    // loop through the entire list of inputs left saving their value
    for (i=0; i<x.length; i++)
    {
        numOfProds.push(x[i].value);
    }
}
function returnValuesOfProducts()
{
    // get all the elements which are inputs
    var x=document.getElementsByTagName("input");
    // remove all un necessary inputs
    x = leaveTextInputs(x);
    // loop through the entire list of saved values and return them to the input
    for (i=0; i<numOfProds.length; i++)
    {
        x[i].value = numOfProds[i];
    }
}

function leaveTextInputs(value)
{
    // create a new blank array
    var newArr = new Array();
    // loop through all the elements in passed array
    for (i=0; i<value.length; i++)
    {
        // cache the element
        var thevalue = value[i];
        // check if the element is a text input
        if (thevalue.type == "text")
        {
            // check the id consists of product in it!
            var regexteststring = thevalue.id;
            // create the pattern to match
            var patt1 = /product/i;
            if (regexteststring.match(patt1) == "product")
            {
                // as additional check, if it has a size quantity of 2 then its defo out stuff
                if (thevalue.size == 2)
                {
                    newArr.push(thevalue);
                }
            }
        }
    }
    // now return the new array
    return newArr;
}