javascript - 使用 jquery 插入更多字段 onclick

Question

我正在开发一个网络应用程序，让用户有机会根据自己的意愿输入更多姓名。该表单有一个链接，必须在单击该链接时执行添加文本框。我知道有一种方法可以使用 jquery 来做到这一点，但目前不知道为什么我只是从 angularjs 转移到 jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
      <table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td><div align="right"><strong><a href="#">Add More Fields</a></strong></div></td>
        </tr>
        <tr>
          <td>Name</td>
          <td>Address</td>
          <td>Age</td>
          <td>Phone Number</td>
        </tr>
        <tr>
          <td><input type="text" name="name" id="name"></td>
          <td><input type="text" name="address" id="address"></td>
          <td><input type="text" name="age" id="age"></td>
          <td><input type="text" name="phone_number" id="phone_number"></td>
        </tr>
      </table>
    </form>

Answer 1

$(document).ready(function()
  {
      $('a').click(function(){
          var id=$(':text').length;
          $('#field').append('<td>Textbox'+id+'</td>');
          $('#more').append('<td><input type="text" id='+id+' name="text'+id+'"></td>');
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
      <table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td><div align="right"><strong><a href="#">Add More Fields</a></strong></div></td>
        </tr>
        <tr id="field">
          <td>Name</td>
          <td>Address</td>
          <td>Age</td>
          <td>Phone Number</td>
        </tr>
        <tr id="more">
          <td><input type="text" name="name" id="name"></td>
          <td><input type="text" name="address" id="address"></td>
          <td><input type="text" name="age" id="age"></td>
          <td><input type="text" name="phone_number" id="phone_number"></td>
        </tr>
      </table>
    </form>

或者试试这个

$(document).ready(function()
  {
      $('a').click(function(){
          var id=$(':text').length;
          $('#more td').append('<input type="text" id='+id+' name="text'+id+'">');
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
  input{
    margin-bottom: 10px;
  }
</style>
<form name="form1" method="post" action="">
      <table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td><div align="right"><strong><a href="#">Add More Fields</a></strong></div></td>
        </tr>
        <tr id="field">
          <td>Name</td>
          <td>Address</td>
          <td>Age</td>
          <td>Phone Number</td>
        </tr>
        <tr id="more">
          <td><input type="text" name="name" id="name"></td>
          <td><input type="text" name="address" id="address"></td>
          <td><input type="text" name="age" id="age"></td>
          <td><input type="text" name="phone_number" id="phone_number"></td>
        </tr>
      </table>
    </form>