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)时,它会起作用,但是当我更改值时,它不起作用(它不起作用).演示.

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

Answer 1

它在第一次之后不起作用的原因是它innerHTML实际上破坏了事件绑定.因此,在修改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/