php javascript之后的动态行插入答案

【问题标题】：Dynamic row insert after php javascriptphp javascript之后的动态行插入
【发布时间】：2014-03-31 13:45:26
【问题描述】：

当我单击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>

【问题讨论】：

标签： javascript php html dynamic input

【解决方案1】：

使用 JQuery 的 .append() 方法在特定标签中一个接一个地添加元素。

用下面的代码改变你的代码：

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

【讨论】：

不起作用，他们总是在我的页面顶部添加，我的这行代码也不起作用：$("name[]").insertAfter("#add_name");

【解决方案2】：

您可以在 jQuery 中使用 .after 函数在特定元素之后追加 https://api.jquery.com/after/

【讨论】：

【解决方案3】：

append 函数 / insertAfter 将起作用。

但在您的代码中，您直接将元素属性用作

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

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

相反，您需要使用以下内容：

将文本框“name[]”的名称值更改为其他名称，例如“name_test”并将其附加在“add_name”之后
您还使用“add_name”作为 id ( "#add_name" )，但它是输入文本框的 名称属性。
您需要在“add_name”之后追加在row 变量中创建的整行 您需要将代码更改为

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

但是，它仍然添加到每个元素的顶部，即以堆栈方式。

因此，您需要通过“add_name”父级，即表单并在该父级中追加

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

它应该可以工作:)

这是上述场景的DEMO Fiddle。

【讨论】：

@TheBaconManWithouBacon，你试过这个吗？