Question

我正在处理表格并遇到一些问题。

我有一个输入字段，当更改为更高或更低的数字时，它会添加/删除额外的字段，但如果在其中一个额外字段中键入内容并添加另一个字段，则会删除应保存值的所有值< / p>

JS：

var eh = document.getElementById('ulId');//list to add list items to
var ac = document.getElementById('inputId');

var defaultId = "xin";

//x is short extra
var anyXFields = false;
var XF = 0;//extra fields
var lastXField = 0;
var mostFields = 0;
var index = [];


function hideInputFields(n) {

    if (lastXField < n) {
        return;
    }else if(lastXField > n) {
        $("#xin" + lastXField).hide();
    }
}


//on change function
function oc() {

    n = ac.value;
    n = parseInt(n);

    lastXField = n - 1;

    if (n > 0) {

        if (anyXFields) {
            hideInputFields(n - 2);
        }

        for (i = 0; i < (n - 1); i++) {
            if (i < mostFields) {
                $("#xin" + i).show();
            } else if (!index[i]) {
                eh.innerHTML += '<li id="'+(defaultId + i)+'"><label>Højde' + (i + 2) +' <label class="sub">Height' + (i + 2) +'</label></label><input name="'+(defaultId + i)+'" class="inputfield"></li>';
                index[i] = 1;
            }
        }

        if (mostFields < (n - 1)) {
            mostFields = n - 1;
        }

        anyXFields = true;
    }

}

Answer 1

您正在使用innerHTML创建列表元素。每次运行oc（）时，所有列表项都是从oc（）中的预定义字符串重新创建的，输入元素中输入的数据不会保存到该字符串中，因此它们将丢失。

实现您想要实现的目标的解决方案/更好的方法是使用for循环来创建列表项，只删除'额外'输入元素，而不是在更改时重新创建所有元素。

Answer 2

如果您尝试附加到列表并删除，则可以在jquery中使用.appendTo（...）或.remove，而不是使用内部html。

将新输入字段添加到列表时，HTML输入字段将重置

2 个答案: