javascript - 第二次更改文本输入后未创建表行

Question

这是我的 HTML 代码:

<table id="display_table"><tr>
<td>No. of Questions:&nbsp;</td>
<td><input type="text" id="questions_num"></td>
</tr><tr>
<td>No. of Options:&nbsp;</td>
<td><input type="text" id="options_num"></td>
</tr></table>

我希望当用户在文本输入中输入x(其ID为options_num)时，x行将被创建。对于创建的每个新行，应该有一个左列和一个右列。左列将包含 "Option"+ somenumber，其中 somenumber 指已创建的行，右列将创建文本输入。

这是我在 JS 中尝试过的:

document.getElementById("options_num").onkeyup = function() {
    var options_num = parseInt(document.getElementById("options_num").value);
    var display_text = '<tr><td>No. of Questions:&nbsp;</td><td><input type="text" id="questions_num"></td></tr><tr><td>No. of Options:&nbsp;</td><td><input type="text" id="options_num"></td></tr>'
    for(var i = 1; i <= options_num; i++) {
        display_text += "<tr><td>Option " + i + ":&nbsp;</td><td>" + "<input type='text' id='option_" + i + "'</td></tr>";  
    }
    document.getElementById("display_table").innerHTML = display_text;
    document.getElementById("options_num").value = options_num.toString();
    document.getElementById("options_num").focus();
}

当我第一次在文本输入中输入一个值(其 id 为 question_num)时它会起作用，但是当我更改该值时，它不起作用(它不执行任何操作)。 Demo .

那么我如何让我的 JS 代码工作呢？

Answer 1

第一次之后它不起作用的原因是 innerHTML 实际上破坏了事件绑定(bind)。因此，在修改 table.innerHTML 后，浏览器会完全重建新的 DOM 元素，而无需附加原始 onkeyup 事件监听器。

我建议稍微更改一下 HTML，这会让一切变得更简单:

<table id="display_table">
    <tbody>
        <tr>
            <td>No. of Questions:</td>
            <td><input type="text" id="questions_num"/></td>
        </tr>
        <tr>
            <td>No. of Options:</td>
            <td><input type="text" id="options_num"/></td>
        </tr>    
    </tbody>
    <tbody id="rows"></tbody> <!-- append generated HTML here -->
</table>

和修改后的JS:

document.getElementById("options_num").onkeyup = function () {

    var options = document.getElementById("options_num"),
        optionsNum = parseInt(options.value),
        tbody = document.getElementById("rows"),
        rows = '';

    for (var i = 1; i <= optionsNum; i++) {
        rows += "<tr><td>Option " + i + "</td><td>" + "<input type='text' id='option_" + i + "'</td></tr>";
    }

    tbody.innerHTML = rows;
    options.focus();
}

因此，我们的想法是将表行放入 tbody 中，这样可以轻松添加新行和替换旧行。

演示:http://jsfiddle.net/8yYyW/2/