php javascript動態行插入

Question

當我點擊plus按鈕時，我有一個動態行輸入。但我的行添加在我的頁面頂部，我希望他們在我的第一行後添加。這裏是我的代碼：

<?php 
?> 
<div style="width:90%;margin:auto;"> 
    <form method="post"> 
    <div id="itemRows"> 
    </div> 
    </form> 
</div> 
<script type="text/javascript"> 
var rowNum = 0; 
function addRow(frm) { 
    rowNum ++; 
    var row = '<p id="rowNum'+rowNum+'"> <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>'; 
    jQuery('#itemRows').append(row); 
    frm.add_qty.value = ''; 
    frm.add_name.value = ''; 
$("name[]").insertAfter("#add_name"); 
} 
function removeRow(rnum) { 
    jQuery('#rowNum'+rnum).remove(); 
} 
</script> 

這裏是我輸入：

<b>Dimanche</b> </br><?php echo $date1 ?> 
     </td> 
     <!-- numéro de projet du dimanche --> 
     <td> 
      <span id="numpro" > 
       <form method="post" action="" onsubmit="return false;"> 

        <input onclick="addRow(this.form);" type="button" value="+" /> 
        <input type="text" id="name" name="add_name"onkeypress="return handleEnter(event, this, 'task');"/> 

        <?php 
         if($result!=false && mysqli_num_rows($result)>0){ 
          while($product = mysqli_fetch_array($result)): 
        ?> 
           <p id="oldRow<?=$product['id']?>"> <input type="text" name="name<?=$product['id']?>" value="<?=$product['name']?>" /> <input type="checkbox" name="delete_ids[]" value="<?=$product['id']?>"> Mark to delete</p> 
          <?php 
          endwhile; 

          } 
          ?> 
       </form> 

Answer 1

可以使用.after功能jQuery的特定元素 https://api.jquery.com/after/

Answer 2

使用jQuery的.append後追加（ ）方法在特定標籤中一個接一個地添加元素。

低於行更改您的代碼：

$("name[]").append("#add_name"); 

Answer 3

追加功能/ insertAfter會的作品。

但在你的代碼中使用了元素屬性直接作爲

$("name[]").insertAfter("#add_name");或

$("name[]").append("#add_name"); 

相反，你需要使用以下內容：

1. 更改的名稱值文本框「名稱[]」爲其他名稱，例如「name_test」，並將其追加到「add_name」後面

2. 此外，您還使用「add_name」作爲編號("#add_name")，但它是名稱屬性的輸入文本框。

3. 而你需要在row varaible創建整行追加「add_name」後 您需要更改代碼

$("input[name=add_name]").after(row);

但是，它仍然加上頂部每個元素即堆棧方式。

因此，你需要經過 「add_name」 父即形式和追加該父內，

$("input[name=add_name]").parent().append(row); 

，它應該工作:)

這裏是DEMO Fiddle以上情況。