Question

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

＆＃13;

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

＆＃13;

Answer 1

首先，您必须更好地识别您的元素。我们为表格添加ID，为添加更多字段链接的ID和 tr model 的类。

然后我们必须复制你要复制的所有html。然后将它附加到表格。

请记住，这样做，当您提交时，所有这些重复的参数都将成为一个值数组。

让我们在这里重构一些不好的代码。

由于我们要复制字段，我们需要删除它们的Id属性。

我正在移动表格外的链接并删除那些空白的tds。还要写一个包含thead和tbody的好表格。

在想添加领域的时候，也想删除。所以让我们创建一个删除链接。

function cloneTrModel() {
  return $('.model').first().clone();
}

var trModel = cloneTrModel();

function setRemove() {
  $(".remove" ).click(function() {
    $(this).closest('tr').remove();
  });
}

setRemove();

$( "#add" ).click(function() {
  $("#contactTable tbody").append(trModel);
  trModel = cloneTrModel();
  setRemove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form name="form1" method="post" action="">
<strong style="float: right;"><a href="#" id="add">Add More Fields</a></strong>
  <table id="contactTable" width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>Age</th>
      <th>Phone Number</th>
      <th>Action</th>
    </tr>
    </thead>
    <tbody>
    <tr class="model">
      <td class="inner"><input type="text" name="name[]"></td>
      <td><input type="text" name="address[]"></td>
      <td><input type="text" name="age[]"></td>
      <td><input type="text" name="phone_number[]"></td>
      <td><a href="javascript:;" class="remove">Remove</a></td>
    </tr>
    </tbody>
  </table>
</form>

Answer 2

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

Answer 3

像这样的东西

$( "#add" ).click(function() {
$( ".inner" ).append( "<input type='text' name='name' id='name'>" );

});

<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="#" id="add">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 class="inner"><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>

使用jquery在onclick上插入更多字段

3 个答案: