我有以下表格
<form action="" class="form-horizontal">
<div id="wrapper">
<div class="row-fluid">
<div class="span6">
<div class="control-group">
<label class="control-label"><?=$core->l("default_comm_type");?></label>
<div class="controls">
<select id="fld_default_comm_type" name="fld_default_comm_type[]" defaultValue="-1" class="m-wrap span10" field="fld_default_comm_type" appEditor="true">
<?=combo_creator::render_default_comm_types()?>
</select>
</div>
</div>
</div>
<div class="span4 checkerAlign">
<div class="control-group">
<div class="controls">
<?=$core->l("is_active");?>
</div>
</div>
</div>
<div class="span2 checkerAlign"><input type="checkbox" name="fld_active[]" id="fld_active" editType="booleanEdit" appEditor="true"/></div>
</div>
<div><a href="#" id="addMore">Add Row</a></div>
</div>
问题是当用户单击“添加行”按钮时,我需要在其中创建此表单元素的副本
<div id="wrapper">
我怎样才能做到这一点?
编辑:已解决
<form action="" class="form-horizontal" id="wrapper">
<div class="row-fluid">
<div class="span6">
<div class="control-group">
<label class="control-label"><?=$core->l("default_comm_type");?></label>
<div class="controls">
<select id="fld_default_comm_type" name="fld_default_comm_type[]" defaultValue="-1" class="m-wrap span10" field="fld_default_comm_type" appEditor="true">
<?=combo_creator::render_default_comm_types()?>
</select>
</div>
</div>
</div>
<div class="span4 checkerAlign">
<div class="control-group">
<div class="controls">
<?=$core->l("is_active");?>
</div>
</div>
</div>
<div class="span2 checkerAlign"><input type="checkbox" name="fld_active[]" id="fld_active" editType="booleanEdit" appEditor="true"/></div>
</div>
<a href="#" id="addMore">add</a>
</form>
在Js部分:
jQuery("#addMore").click(function(){
var contents = jQuery("form").html();
jQuery("#wrapper").append(contents);
});
单击添加时,它会按照我想要的方式插入表单元素
当单击删除时,它会删除元素。谢谢你们的提示
问题解决了!多谢你们。
我认为你需要复制 (row-fluid
),而不是全部(Wrapper
)内容,这应该可以让您在单击时添加更多原始表单模板行AddMore
link.
这是@user2389688 对建议解决方案的编辑:
$("#addMore").click(function(){
$(".row-fluid:last").clone().appendTo(".wrapper");
});
JsFiddle链接:http://jsfiddle.net/tCY8v/1/ http://jsfiddle.net/tCY8v/1/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)