Question

我有一个HTML表格

<table>
<tr>
    <td>
        Players
    </td>
    <td id="positions"></td>
</table>

用户可以按一个按钮，它会将保管箱和文本框连接到td

位置

他们用户可以在Dropbox和文本框中设置值，然后添加其他播放器。

但是，一旦他添加了一个新元素，旧的保管箱和文本框中的值就会重置。是否可以保留它们？

addPosition函数：

function addPosition (){
    var toDisplay = "";

    toDisplay += "<input type='number'>";
    toDisplay += "<select><option value='back'>Back</option><option value='front'>Front</option></select>";

    document.getElementById("positions").innerHTML += toDisplay; 
}

Answer 1

您应该create和append DOM元素，而不是替换父级HTML：

function addPosition() {
    var input = document.createElement("input");
    input.type = "number";
    var select = document.createElement("select");
    select.innerHTML = "<option value='back'>Back</option><option value='front'>Front</option>";
    var positions = document.getElementById("positions");
    positions.appendChild(input);
    positions.appendChild(select);
}

（另外，你错过了结束</tr>）

更好的是，使用document fragments来提高性能：

function addPosition() {
    var fragment = document.createDocumentFragment();
    var input = document.createElement("input");
    input.type = "number";
    var select = document.createElement("select");
    select.innerHTML = "<option value='back'>Back</option><option value='front'>Front</option>";
    fragment.appendChild(input);
    fragment.appendChild(select);

    document.getElementById("positions").appendChild(fragment);
}

jsFiddle Example

Answer 2

也许使用HTML5数据元素（如果不是选项，可以使用cookies / session）？

Answer 3

您应该在DOM中创建一个选项元素并将其添加到列表中，例如：

var oSelect = document.getElementById("positions");
var oOption = document.createElement("option");
oOption.text = "Next option";
oSelect.add(oOption);

保留textBox的值，修改元素后选择

3 个答案: