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以上情况。