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

我想在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>

$（文档）.ready（函数（）{
$（“#teamMemNum”）。在（'keyup'，function（）上{
var num=$（“#teamMemNum”）.val（）；
var markup=“输入名称：”；
对于（变量i=0；i

您的

表

为空，您正在尝试将新的

标记

添加到

tbody

中。只需将

t正文

添加到

表中

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

---

看起来，只要一点零钱，一切都会像您拥有的那样正常工作。在循环中，有一个选择器，

$（“memNameTable tbody”）

，尽管在HTML中没有

tbody

。您可以将

tbody

添加到HTML中的表中，或者将选择器更改为

$（“memNameTable”）

一些指针：

• 您应该在数字输入上收听

  change

  事件，而不是

  keyup

  事件（这考虑到通过输入框中的上下箭头循环）

• 您应该从表行数中减去现有表行数 在输入框中，以确定要追加的行数

• 您的表中可能没有

  tbody

  ；只是附加 直接到

  表

  元素

$（文档）.ready（函数（）{
$（“#teamMemNum”）。在（'change'，function（）上{
var num=$（“#teamMemNum”）.val（）-$（“#memNameTable tr'）.length；
var markup=“输入名称：”；
对于（变量i=0；i
实际上，用户可以粘贴行数

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


$（文档）.ready（函数（）{
$（“#teamMemNum”）。在（'change paste keyup'，function（）上{
$（“#memNameTable”）.html（“”）；
var num=$（“#teamMemNum”）.val（）；
var markup=“输入名称：”；
对于（变量i=0；i
正如其他人指出的那样，您缺少了桌上的TBODY

另一点（也已经指出）是您应该使用更广泛的事件（如onBlur或onChange）

在我的建议中，您不应该添加具有相同ID的元素（这将使您的HTML不符合要求-尽管这可能会让您或其他人对未来感到头疼，但它会起作用）

也就是说，我不太喜欢HTML字符串操作，尽量避免它，因此，我建议您使用一个“虚拟”行（发布表单时应忽略该行），如：


输入名称：
$（文档）.ready（函数（）{
$（“#teamMemNum”）。关于（'change'，函数（e）{
var num=$（“#teamMemNum”）.val（）；
对于（变量i=0；i

对我来说，这是一种更清晰的方法，可以避免将HTML与代码混用

注意：
.hidden
css类应设置为
{display:none；}
或类似的值

<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">
  <tbody>
    <tr class="hidden sampleTR">
      <td><label for='memName' class="lineLabel">Enter name: </label></td>
      <td><input type='text' name='memName'></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>


<script type="text/javascript">
 $(document).ready(function(){
    $("#teamMemNum").on('change', function(e){
        var num = $("#teamMemNum").val();

        for(var i = 0; i < num; i++){

            //Clone a new line from the dummy sample (invisible) line
            var newLine = $('#memNameTable').find('tr.sampleTR').first().clone();

            //Generate a new id to be used
            var newID = 'memName_' + $('#memNameTable').find('tr').length;

            //Sets the new ID on the newLine elements
            $(newLine).find('input[name=memName]').attr('id', newID);
            $(newLine).find('label.lineLabel').attr('for', newID);

            //Append the newLine to the TBody of the Table
            $(newLine).appendTo($("#memNameTable tbody"));
        }
    });
});
</script>