通过 jQuery 添加新记录元素
add new record element by jquery
>我有一个表格在现场表单中,我希望能够根据需要多次复制一组字段。我还希望这些新字段组的属性的字段 ID、名称和标签增加 1。到目前为止,我已经用jQuery尝试过这个,并让它至少复制了一组字段,但删除不起作用。而且我不确定如何为这 3 个属性中的每一个做 +1。我很感激我能得到的任何帮助。
<tr>
<td>name<span class="description"></span>
</td>
<td>
<input type="text" name="type_1" id="type_11" class="regular-text" />
</td>
</tr>
<tr>
<td>pic<span class="description"></span>
</td>
<td>
<input type="file" name="logo_1" id="logo_1" />
</td>
</tr>
<div class="formRowRepeatingSection"><a href="#" class="addPro">Add New</a>
</div>
<div class="repeatingSection"></div>
JS - Jquery
$(function(){
$('#addPro').click(function() {
$('#repeatingSection').append('<tr><td>name<span class="description"></span></td><td><input type="text" name="pro_1'+i+'[]" id="pro_1'+i+'[] class="regular-text" /></td></tr><tr><td>pic<span class="description"></span></td><td><input type="file" name="pro_pic_1'+i+'[]" id="pro_pic_1'+i+'[]" /></td></tr>');
});
});
单击"#addPro"时,我需要在"#repeatingSection"此代码 HTML 中重新回复
编辑:-
$(function(){
$('#addPro').click(function() {
$('#repeatingSection').append('<tr><td>name<span class="description"></span></td><td><input type="text" name="pro_1'+i+'[]" id="pro_1'+i+'[]" class="regular-text" /></td></tr><tr><td>pic<span class="description"></span></td><td><input type="file" name="pro_pic_1'+i+'[]" id="pro_pic_1'+i+'[]" /></td></tr>');
});
});
我现在将编辑....但是我需要何时单击#addPro
插入新行
HTML
<table>
<tr>
<td>name<span class="description"></span>
</td>
<td>
<input type="text" name="type_1" id="type_11" class="regular-text" />
</td>
</tr>
<tr>
<td>pic<span class="description"></span>
</td>
<td>
<input type="file" name="logo_1" id="logo_1" />
</td>
</tr>
</table>
<div class="formRowRepeatingSection"><a href="#" id="addPro">Add New</a>
</div>
<div id="repeatingSection"></div>
jQuery
$(document).ready(function () {
var i = 0;
$('#addPro').click(function () {
console.log(i);
i++;
$('#repeatingSection').append('<tr><td>name<span class="description"></span></td><td><input type="text" name="pro_1' + i + '[]" id="pro_1' + i + '[]" class="regular-text" /></td></tr><tr><td>pic<span class="description"></span></td><td><input type="file" name="pro_pic_1' + i + '[]" id="pro_pic_1' + i + '[]" /></td></tr>');
});
});
在这里演示
我更改了什么:
- 替换为 html:类到
<a>
元素中的 ID 和div 中的 ID 以附加到#repeatingSection
- 添加了在此处关闭 ID
"
id="pro_1'+i+'[] class="regular-text"
- 在点击功能外部添加了
var i = 0;
,并在其中添加了i++;
。 - 我还为
<table>
添加了打开和关闭标签,也许您在未发布的代码中的其他地方有它们。我添加只是为了获得正确的 html 标记。
相关文章:
- CRM 2011-在插入新记录或修改现有记录时捕获子网格的事件
- jQuery.bind或.on习惯于绑定到新记录
- 如何观察在 Sails .js 中添加到模型中的新记录
- 如何在添加新记录时附加委托
- 添加新记录时删除了 ExtJs 现有记录
- Sequelize多对多-如何创建新记录并更新联接表
- 在网页上添加已加载记录的新记录
- 如何使用angularJs/Javascript/Jquery获取表的最后一条记录并更新列值并插入到具有新记录的同一列
- 使用 Ember-Model 创建新记录
- 级联下拉列表,JSON 不会带来新记录
- 每当有新记录时,使用 Ember-Model 更新视图
- 通过 jQuery 添加新记录元素
- Ember - 绑定到数组控制器中的过滤列表,然后添加新记录
- 从不同的控制器 Ember.js 向模型添加新记录
- Telerik ASP.Net RadGrid 添加新记录客户端 JavaScript 防止行为
- 主干(也是木偶)尝试在集合开始时显示新记录,而不重新渲染整个集合
- 节点发布 将新记录插入我的数据库不会返回新条目的数据
- 挖空.js单击按钮后使用数据创建新记录
- 摆脱形式,仅使用按钮创建新记录
- 剑道网格值在向网格添加新记录时不会更改