以下是我如何处理包含隐藏 id、标签和输入字段的数据,所有数据都包含在字段集中。您可以使用实际的表格来概括它。
以下是为两组字段生成的 HTML 以及单击以添加行的链接:
<fieldset>
<input type="hidden" name="data[VmfrDesignatedIncome][0][id]" value="668" id="VmfrDesignatedIncome0Id"/>
<div class="input text">
<label for="VmfrDesignatedIncome0Designation">Designation</label>
<input name="data[VmfrDesignatedIncome][0][designation]" value="blah" maxlength="512" type="text" id="VmfrDesignatedIncome0Designation"/></div>
</fieldset>
<fieldset>
<input type="hidden" name="data[VmfrDesignatedIncome][1][id]" value="669" id="VmfrDesignatedIncome1Id"/>
<div class="input text">
<label for="VmfrDesignatedIncome1Designation">Designation</label>
<input name="data[VmfrDesignatedIncome][1][designation]" value="blah2" maxlength="512" type="text" id="VmfrDesignatedIncome1Designation"/></div>
</fieldset>
<a href="#" id="addrow">Add row</a>
这是 Javascript,它克隆页面上的最后一个字段集,然后修改 id、名称和字段值以将其中的数字加一。请注意,选择器必须使用>
子选择器。
/* As the strings to the function below may have [ or ]
** we want to stop it being treated as a regexp
*/
RegExp.quote = function(str) {
return str.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
};
function findNumberAddOne(attributeString) {
/*Finds the number in the given string
** and returns a string with that number increased by one
*/
var re = new RegExp("(.*)([0-9])(.*)");
var nPlusOne = attributeString.replace(re, "$2")+"+1";
var newstr = attributeString.replace(re, "$1")+eval(nPlusOne)+attributeString.replace(re, "$3");
return newstr;
}
$(document).ready(function() {
/* Duplicate the last set of designated income fields and increase the relevants id/name etc.
** so that it works as a new row in the table when saved*/
$('#addrow').click(function() {
$('fieldset:last').clone().insertAfter('fieldset:last');
$('fieldset:last > input').attr('id',findNumberAddOne($('fieldset:last > input').attr('id')));
$('fieldset:last > input').attr('value',''); /*Blank out the actual value*/
$('fieldset:last > input').attr('name',findNumberAddOne($('fieldset:last > input').attr('name')));
$('fieldset:last > div > label').attr('for',findNumberAddOne($('fieldset:last > div > label').attr('for')));
$('fieldset:last > div > input').attr('id',findNumberAddOne($('fieldset:last > div > input').attr('id')));
$('fieldset:last > div > input').attr('value',''); /*Blank out the actual value*/
$('fieldset:last > div > input').attr('name',findNumberAddOne($('fieldset:last > div > input').attr('name')));
});
});