Question

我正在尝试为我的Web应用程序的用户提供一种方法，以便能够将更多的名字/姓氏字段动态添加到需要作为创建窗口小部件类型页面的一部分填写的表单。

问题

代码的工作原理是它创建了一组新的名/姓名字段，但它将它附加在错误的位置...它将它放在表单的顶部而不是第一个/最后一个集合下面名字字段。

代码：

这就是HTML表格的样子：

 <table class="table table-bordered table-hover">     
 <tr><td colspan="3"><input class="form-control" type="input" placeholder="Location" name="location" /></td></tr>
 <tr><td colspan="3"><input class="form-control" type="input" placeholder="Department" name="department" /></td></tr>
 <div id='listofnames'>
        <tr>
            <td><input class="form-control" type="input" placeholder="First Name" name="fname" /></td>
            <td><input class="form-control" type="input" placeholder="Last Name" name="Lname" /></td>
             <td><button id='addname' type="button" class="btn btn-info btn-circle"><i class="fa fa-plus"></i></button></td>                                
        </tr>
 </div>
 <tr><td colspan="3"><input type="submit" name="submit" class="btn btn-primary" value="Assign" /></td></tr>
 </table>

你看到的是我试图隔离我想要添加新行的区域。

当用户点击“addname”按钮时，我执行以下代码：

$( "#addname" ).click(function() {

  htmlstring ="<tr>";
  htmlstring += "<td><input class='form-control' type='input' placeholder='First Name' name='fname' /></td>";
  htmlstring += "<td><input class='form-control' type='input' placeholder='Last Name' name='lname' /></td>";
  htmlstring += "</tr>";
  $( "#listofnames" ).append(htmlstring);

});

你能告诉我我做错了什么吗？

编辑1

使用.before()方法我改变了这个：

$( "#listofnames" ).append(htmlstring);

到此：

$( "#assign" ).before(htmlstring);

其中“assign”现在是触发此全部的按钮的id。从建议.after()

的答案中得出了这个想法

Answer 1

我认为你看起来像这样：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
  <tr>
    <td colspan="3">
      <input class="form-control" type="input" placeholder="Location" name="location" />
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <input class="form-control" type="input" placeholder="Department" name="department" />
    </td>
  </tr>
    <tr id='listofnames'>
      <td>
        <input class="form-control" type="input" placeholder="First Name" name="fname" />
      </td>
      <td>
        <input class="form-control" type="input" placeholder="Last Name" name="Lname" />
      </td>
      <td>
        <button id='addname' type="button" class="btn btn-info btn-circle">append</button>
      </td>
    </tr>
  <tr>
    <td colspan="3">
      <input type="submit" name="submit" class="btn btn-primary" value="Assign" />
    </td>
  </tr>
</table>

＆＃13;

emit([doc.ingredients[i].ingredient, doc.actions[i].action, doc.servings, doc.totaltime], null)
emit([doc.ingredients[i].ingredient, doc.actions[i].action, doc.totaltime, doc.servings], null)
emit([doc.ingredients[i].ingredient, doc.servings, doc.actions[i].action, doc.totaltime], null)
emit([doc.ingredients[i].ingredient, doc.servings, doc.totaltime, doc.actions[i].action], null)
emit([doc.ingredients[i].ingredient, doc.totaltime, doc.actions[i].action, doc.servings], null)
emit([doc.ingredients[i].ingredient, doc.totaltime, doc.servings, doc.actions[i].action], null)
emit([doc.actions[i].action, doc.ingredients[i].ingredient, doc.totaltime, doc.servings], null)
emit([doc.actions[i].action, doc.ingredients[i].ingredient, doc.servings, doc.totaltime], null)
emit([doc.actions[i].action, doc.servings, doc.totaltime, doc.ingredients[i].ingredient], null)
emit([doc.actions[i].action, doc.servings, doc.ingredients[i].ingredient, doc.totaltime], null)
emit([doc.actions[i].action, doc.totaltime, doc.servings, doc.ingredients[i].ingredient], null)
emit([doc.actions[i].action, doc.totaltime, doc.ingredients[i].ingredient, doc.servings], null)
emit([doc.servings, doc.ingredients[i].ingredient, doc.actions[i].action, doc.totaltime], null)
emit([doc.servings, doc.ingredients[i].ingredient, doc.totaltime, doc.actions[i].action], null)
emit([doc.servings, doc.actions[i].action, doc.ingredients[i].ingredient, doc.totaltime], null)
emit([doc.servings, doc.actions[i].action, doc.totaltime, doc.ingredients[i].ingredient], null)
emit([doc.servings, doc.totaltime, doc.ingredients[i].ingredient, doc.actions[i].action], null)
emit([doc.servings, doc.totaltime, doc.actions[i].action, doc.ingredients[i].ingredient], null)
emit([doc.totaltime, doc.ingredients[i].ingredient, doc.servings, doc.actions[i].action], null)
emit([doc.totaltime, doc.ingredients[i].ingredient, doc.actions[i].action, doc.servings], null)
emit([doc.totaltime, doc.actions[i].action, doc.servings, doc.ingredients[i].ingredient], null)
emit([doc.totaltime, doc.actions[i].action, doc.ingredients[i].ingredient, doc.servings], null)
emit([doc.totaltime, doc.servings, doc.actions[i].action, doc.ingredients[i].ingredient], null)
emit([doc.totaltime, doc.servings, doc.ingredients[i].ingredient, doc.actions[i].action], null)

＆＃13;

Answer 2

试试这个：

$（本）。之前（htmlstring）;

Answer 3

尝试更改

$( "#listofnames" ).append(htmlstring);

的

$( "#listofnames" ).html(htmlstring);

尝试动态地向表添加行是失败的

3 个答案: