* <pre>
* 指定オブジェクトの要素をコピーして、入力値および選択値をクリア後、指定オブジェクトの後ろに追加します。
* 追加する前に、指定制限件数チェックを行い、エラーの場合は、後続処理を中止します。
* </pre>
* @param 追加対象の要素ID(必須)
* @param 追加対象の制限数(必須)
* @param 追加対象行の親要素ID(行追加の場合、必須)
*/
function add(targetId, addLimitCnt, targetRowParentId){
var addOriElm;
// 行追加の場合
if(targetRowParentId){
addOriElm = $(event.srcElement).parents('[id=' + targetRowParentId + ']').find('[id=' + targetId + ']');
}
// 項目X追加の場合
else{
addOriElm = $('[id=' + targetId + ']');
}
// 追加制限チェック
if(addOriElm) {
if(addOriElm.length === addLimitCnt){
alert('もうたくさんだよ。これぐらいでいいでしょう?');
return;
}
// 指定オブジェクトの最後要素をコピー
var newObj = addOriElm.last().clone();
// 値クリア
$(newObj).find("input[type='radio']").prop("checked",false);
$(newObj).find("input[type='checkbox']").prop("checked",false);
$(newObj).find('input, textarea, select').val('');
//$(newObj).find("select > option:selected").prop("selected",false);
addOriElm.last().after(newObj);
return;
}
console.log('存在しないIdです。' + targetId);
}
/**
* <pre>
* 指定対象要素を削除する。
* 削除する前に、指定制限件数チェックを行い、エラーの場合は、後続処理を中止します。
* </pre>
* @param 追加対象の要素ID(必須)
* @param 追加対象行の親要素ID(行追加の場合、必須)
*/
function del(targetId, targetRowParentId){
var targetElm;
//行削除
if(targetRowParentId){
targetElm = $(event.srcElement).parents('[id =' + targetRowParentId + ']').find('[id =' + targetId + ']');
}
//項目X削除
else{
targetElm = $('[id =' + targetId + ']');
}
if(targetElm.length === 1){
alert('最後は削除できません');
//$('[id=' + targetId + ']').first().children().find('[id=' + $(el).attr('id') + ']').prop('disabled',true);
return;
}
$(event.srcElement).parents('[id =' + targetId + ']').each(function(){ $(this).remove();});
}
//row
<div id="sampleParentRow">
<div id='sampleRow'>
<div>
<label>item</label>
<input type='text' >
</div>
<div>
<button onClick="del('sampleRow', 'sampleParentRow')">del</button>
</div>
</div>
<div>
<button onClick="add('sampleRow', 5, 'sampleParentRow');" >add</button>
</div>
</div>
//block
<div id="X">
....中略
<div>
<button onClick="add('X', 3);">add</button>
</div>
<div>
<button onClick="del('X')" >del</button>
</div>
....中略
</div>
댓글 없음:
댓글 쓰기