2016년 5월 5일 목요일

add

            /**
             * <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>





         

댓글 없음:

댓글 쓰기