使用jquery插入更多字段onclick

Question

我正在研究一個Web應用程序，它使用戶有機會根據用戶的意願輸入更多的名稱。該表單有一個鏈接，必須在點擊該鏈接時添加文本框。 我知道有使用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

類似的東西

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

Answer 2

首先你必須找出更好的你的元素。讓我們把一個ID爲表，一個ID爲添加更多的領域鏈接和一個類爲tr模型。

然後我們必須複製你想複製的所有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 3

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