HTML 表在添加行时重置输入答案

【问题标题】：HTML Table Resets Inputs When Row is AddedHTML 表在添加行时重置输入
【发布时间】：2017-06-06 14:39:32
【问题描述】：

我正在使用 JQuery 扩展 Chosen 作为表中的下拉菜单。我正在使用 Javascript 向表中添加行，但是当我添加一行时，最后一行上的选定框是唯一有效的框。澄清一下，当我说它们不起作用时，我的意思是它们不会打开或关闭（如果它们是打开的）。

这是表格的 HTML：

    <table id="entrytable">
        <tbody id="entrytbody">
            <tr>
                <th>Lot</th>
                <th>Time In</th>
                <th>Time Out</th>
                <th>Lot Condition</th>
                <th>Plowed</th>
                <th>Shovelled</th>
                <th>Salted</th>
                <th>People Who Helped You</th>
            </tr>
        </tbody>
    </table>

这是我用来添加一行的代码：

        var numRows = 0;
        function addRow() {
            var table = document.getElementById("entrytbody");
            table.innerHTML += "<tr><td><select id='lot" + numRows + "' name='lot" + numRows + "' data-placeholder='Choose a Lot...' class='chosen-select' required><option value=''></option><option value='United States'>United States</option><option value='United States'>aawsd</option><option value='United States'>hhe</option><option value='United States'>Ugfdh</option><option value='United States'>ffy</option><option value='United States'>uhg</option></select></td><td><input name='timein" + numRows + "' type='time' required></td><td><input name='timeout" + numRows + "' type='time' required></td><td><input name='condition" + numRows + "' type='text' required></td><td><input name='plowed" + numRows + "' type='checkbox'></td><td><input name='shovelled" + numRows + "' type='checkbox'></td><td><input name='salted" + numRows + "' type='checkbox'><input name='saltamount" + numRows + "' type='number' style='width: 40px;' min=0></td><td><input name='people" + numRows + "' type='text' required></td></tr>"
            $("#lot" + numRows).chosen();
            numRows++;
        }
        addRow();

当我让它在页面加载时有两行时，它们都可以工作。此外，当调用$("#lot" + numRows).chosen(); 被移除时，之前的行仍然不起作用。

我已经尝试解决这个问题几个小时了，并且也在寻找解决方案，但仍然无法解决。

【问题讨论】：

标签： html input html-table row reset

【解决方案1】：

在尝试了几个小时后，我放弃并删除了下拉菜单的“已选择”方面，并且常规下拉菜单会在添加新行后重置。长话短说，我通过 javascript 创建一个表格行并将 HTML 注入其中，而不是直接插入表格，从而解决了这个问题。

我不确定它为什么起作用，但这里是编辑后的代码：

    var numRows = 0;
    function addRow() {
        var newRow = document.createElement('tr');
        newRow.innerHTML += "<td><select id='lot" + numRows + "' name='lot" + numRows + "' data-placeholder='Choose a Lot...' class='chosen-select' required><option value=''></option><option value='United States'>United States</option><option value='United States'>aawsd</option><option value='United States'>hhe</option><option value='United States'>Ugfdh</option><option value='United States'>ffy</option><option value='United States'>uhg</option></select></td><td><input name='timein" + numRows + "' type='time' required></td><td><input name='timeout" + numRows + "' type='time' required></td><td><input name='condition" + numRows + "' type='text' required></td><td><input name='plowed" + numRows + "' type='checkbox'></td><td><input name='shovelled" + numRows + "' type='checkbox'></td><td><input name='salted" + numRows + "' type='checkbox'><input name='saltamount" + numRows + "' type='number' style='width: 40px;' min=0></td><td><input name='people" + numRows + "' type='text' required></td>"
        var table = document.getElementById("entrytbody");
        table.appendChild(newRow);
        $("#lot" + numRows).chosen();
        numRows++;
    }
    addRow();

我还编辑了标签以适应正在发生的实际问题

【讨论】：