Question

我想在html页面中动态添加表格的元素和表单元素，但我无法这样做。如果我在输入框中输入2，则应自动添加2个新输入框和标签，而不单击任何按钮。我认为＆＃39; keyup＆＃39;事件处理程序应该在这里但我无法形成我的代码。请各位帮我修改我的代码或建议其他代码以满足我的需求。

HTML CODE：

<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>

Answer 2

您的import cx_Oracle为空，并且您尝试将新table添加到markup。只需将tbody添加到tbody

即可

table

Answer 3

看起来一切都应该按照你的方式运行得很好，只需要一点点改动。在循环中，您有这个选择器$("memNameTable tbody")，尽管在您的HTML中没有tbody。您可以在HTML中将tbody添加到表中，也可以将选择器更改为$("memNameTable")。

Answer 4

一些指示：

您应该在数字输入上收听change事件而不是keyup事件（这会考虑通过输入框中的向上和向下箭头进行循环）。
您应该从数字中减去现有表格行的数量在输入框中，以确定要追加的行数。
您的桌子内可能没有tbody;只是附加直接到table元素。

＆＃13;

$(document).ready(function() {
  $("#teamMemNum").on('change', function() {
    var num = $("#teamMemNum").val() - $('#memNameTable tr').length;
    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);
    }
  });
});

＆＃13;

<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>

＆＃13;

Answer 5

正如其他人指出的那样，你错过了桌上的TBODY。

另一点（也已经做过）是你应该使用更广泛的事件（比如onBlur或onChange）。

在我看来，你不应该添加具有相同ID的元素（这会使你的HTML变得不合规 - 虽然它可能会让你或其他人对未来感到头痛）。

话虽如此，我不是非常关注HTML字符串操作并试图尽可能地避免它，所以，我建议你使用“虚拟”行（发布时应该忽略它）形式），如：

.hidden

对我来说，这是一种更清晰的方法，可以不将HTML与代码混合在一起。

注意：{ display:none; } css类应设置为forEach()或等效的。

在html页面中动态添加表单元素和表元素

5 个答案: