在 php javascript 之后动态插入行
Dynamic row insert after php javascript
当我单击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>
使用 JQuery 的 .append() 方法在特定标签中一个接一个地添加元素。
使用以下行更改代码:
$( "name[]" ).append( "#add_name" );
您可以使用 jQuery 中的 .after
函数在特定元素后追加https://api.jquery.com/after/
追加函数/插入之后将起作用。
但是在您的代码中,您直接将元素属性用作
$( "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);
它应该:)工作
这是上述场景的演示小提琴。
相关文章:
- 如何动态插入jquery代码
- 动态插入的表:JQuery未检测到最后一行
- 使用jquery插入动态HTML后,单击不起作用
- 将自定义下拉菜单添加到 tinyMCE 并插入动态内容
- 在查询中插入动态文本框值
- 如何在车把/Ember.js中插入动态{{属性}}
- Rails在数据库中插入动态字段
- 如何在iframe中插入动态JavaScript标记
- 应插入时未插入动态类
- 在选择标签中插入动态选项,使用Jquery
- 如何使用php在mysql中插入动态表单字段
- 在表单头中插入动态文本
- 向数据库中插入动态生成的值
- 如何调用jquery插入动态html元素
- 如何插入动态生成的运行时文本框的值
- 插入动态html内容
- 在多个页面中插入动态页眉
- 如何编辑和插入动态创建的表单文本框值到MySQL数据库
- 如何向SQL数据库插入动态值
- 以Dojo声明的方式插入动态PHP