javascript - 在html页面中动态添加form元素和table元素

Question

我想在 html 页面中动态添加表格元素和表单元素，但我无法这样做。如果我在输入框中输入 2，则应自动添加 2 个带有标签的新输入框，而无需单击任何按钮。我认为 'keyup' 事件处理程序应该在这里工作。但是我无法形成我的代码。请大家通过更正我的代码或建议一些其他代码来满足我的相同需求来帮助我。

HTML 代码:

<form>
    <input type="number" id="teamMemNum">
</form>
<table id="memNameTable"></table>

JavaScript:

<script type="text/javascript">
     $(document).ready(function(){
        $("#teamMemNum").on('keyup', function(){
            var num = $("#teamMemNum").val();
            var markup = "<tr><td><label for='memName'>Enter name: </label></td><td><input type='text' name='memName' id='memName'></td><td></td><td></td></tr>";
            for(var i = 0; i < num; i++){
                $("#memNameTable tbody").append(markup);
            }
        });
    });
</script>

Answer 1

实际上用户可以粘贴行数。

此外，当输入字段值更改时，您应该清除表格。

$(document).ready(function(){
        $("#teamMemNum").on('change paste keyup', function(){
            $("#memNameTable").html("");
            
            var num = $("#teamMemNum").val();
            var markup = "<tr><td><label for='memName'>Enter name: </label></td><td><input type='text' name='memName' id='memName'></td><td></td><td></td></tr>";
            for(var i = 0; i < num; i++){
                $("#memNameTable").append(markup);
            }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="number" id="teamMemNum">
</form>
<table id="memNameTable"></table>