jquery - 添加新的表单域行
问题描述
我有这些表单域:
<div class="input-group-option">
<div class="col-md-2">
<div class="form-group" id="add_aantal_huidig_div">
<input type="number" class="form-control" id="add_aantal_huidig[]" name="add_aantal_huidig[]" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group" id="add_min_aantal_1_div">
<input type="number" class="form-control" id="add_min_aantal_1[]" name="add_min_aantal_1">
</div>
</div>
<div class="col-md-2">
<div class="form-group" id="add_min_aantal_2_div">
<input type="number" class="form-control" id="add_min_aantal_2" name="add_min_aantal_2[]" value="">
</div>
</div>
</div>
当用户单击其中一个表单域时,我正在使用此脚本创建一行新的表单域。
$(function(){
$(document).on('focus', 'div.input-group-option:last-child input', function(){
var sInputGroupHtml = $(this).parent().html();
var sInputGroupClasses = $(this).parent().attr('class');
$(this).parent().parent().append('<div class="'+sInputGroupClasses+'">'+sInputGroupHtml+'</div>');
});
});
我现在遇到的问题是,当用户单击表单域时,只会复制此表单域,而不会复制其他表单域。有了这个结果:
有什么建议么?
解决方案
html
<div class="input-group-option-container">
<div class="input-group-option">
<div class="col-md-2">
<div class="form-group" id="add_aantal_huidig_div">
<input type="number" class="form-control" id="add_aantal_huidig[]" name="add_aantal_huidig[]" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group" id="add_min_aantal_1_div">
<input type="number" class="form-control" id="add_min_aantal_1[]" name="add_min_aantal_1">
</div>
</div>
<div class="col-md-2">
<div class="form-group" id="add_min_aantal_2_div">
<input type="number" class="form-control" id="add_min_aantal_2" name="add_min_aantal_2[]" value="">
</div>
</div>
</div>
</div>
javascript
$(function(){
$(document).on('focus', 'div.input-group-option:last-child input', function(){
var sInputGroupHtml = $('div.input-group-option:last-child').html();
var sInputGroupClasses = $('div.input-group-option').attr('class');
$('div.input-group-option').parent().append(`<div class="${sInputGroupClasses}">${sInputGroupHtml}</div>`);
});
});
风格
.input-group-option-container {
display: flex;
flex-direction: column;
}
推荐阅读
- r - R按字母顺序重新排列列值
- python - 努力理解一段代码
- excel - 数据验证列表被忽略
- javascript - 使用空格验证用户输入
- sql - NLS_LANG 导致 MATCH RECOGNIZE ORACLE SQL 出现问题
- d3.js - d3.js (arcgis js api 3.31) 无法在 arcgis js api 中选择“map_gc”dom
- python - Apache Tika 是否保留已解析的数据?
- laravel - Laravel eloquent - 合并父级 $appends
- typescript - 如何在 TypeScript 中完成这个简单的界面?
- linux - 有什么不对吗?我想从linux中的用户输入比较变量中的许多单词