form表單中動態添加、刪除一行明細的JQuery通用方法

/* 動態添加行的通用方法
 * 參數:trId-點擊行<tr>的id屬性,默認第一行的<tr>標籤id;
 * 使用要求:一、要求默認顯示第一行,編號爲0;
 * 二、行標籤<tr>內全部標籤的id以‘-’加行序號(從0開始)結尾;
 * 三、屬於form表單的標籤元素name屬性中的序號上加‘[]’
 */
function addOneTr(trId,indexStr){
     var index = parseInt(trId.split('-')[1]);
      //var index = parseInt(indexStr.substring(1));//點的是第幾行,從0開始
     var trPre = $("#"+trId);//點擊行的tr標籤
     var trSize = $("#"+trId).parent().find("tr").size();//已有行數
     var nextTrId = trId.replace("-"+index,"-"+(trSize));//添加行的tr的Id
     var reg1 = new RegExp("-"+index,"g");//正則表達式將-編號全局替換爲-新編號
     var trNext = trPre.html().replace(reg1,"-"+(trSize));
     var reg2 = new RegExp("\\["+index+"\\]","g");//正則表達式將[編號]全局替換爲新的[新編號]
     trNext = trNext.replace(reg2,"\["+(trSize)+"\]");
     trNext = '<tr id="'+nextTrId+'">'+trNext+'</tr>';//新行元素
     $(trPre).parent().append(trNext);//動態添加一行
     $("#"+nextTrId+" td:first-child").empty().append(trSize+1);//改變新添加行的行號
     $("#"+nextTrId+" input").each(function(){
           $(this).val("");
     });
     $("#"+nextTrId+" textarea").each(function(){
           $(this).val("");
     });
     $("#"+nextTrId+" select").each(function(){
           $(this).val("");
     });
     if(index == 0){//新添加航的操做處添加刪除行按鈕
           $("#"+nextTrId+" td:last-child").append('<a class="p5" title="刪除" onclick="delOneTr(\''+nextTrId+'\')"><i class="fa fa-remove"></i></a>');
     }
}
/*
 * 動態刪除行的通用方法。與html代碼無耦合,動態新增行纔有刪除按鈕。
  * 處理邏輯:刪除一行時,遍歷以後的每一行,使該行編號減1
 * 參數:trId-點擊行<tr>的id屬性;
 */
function delOneTr(trId){
     $("#"+trId).remove();
     var index = parseInt(trId.split('-')[1]) + 1;//點擊的下一行編號
     var nextTrId = trId.replace("-"+(index-1),"-"+(index));//點擊的下一行<tr>的id
     console.log("nextTrId:"+nextTrId);
     while($("#"+nextTrId).length > 0){//while($("#tt"))的寫法不論是否存在元素都會一直執行
           console.log(index);
           var trNext = $("#"+nextTrId).html();//tr父節點
           var newTrId = nextTrId.replace("-"+index,"-"+(index-1))//循環行<tr>新的id
           var reg1 = new RegExp("-"+(index),"g");//正則表達式將-全部編號減1
           trNext = trNext.replace(reg1,"-"+(index-1));
           var reg2 = new RegExp("\\["+(index)+"\\]","g");//正則表達式將-全部編號減1
           trNext = trNext.replace(reg2,"\["+(index-1)+"\]");
           trNext = '<tr id="'+newTrId+'">'+trNext+'</tr>';//新行元素
           console.log(trNext);
           $("#"+nextTrId).replaceWith(trNext);
           $("#"+newTrId+" td:first-child").empty().append(index);//改變新添加行的行號
           var nextTrId = nextTrId.replace("-"+index,"-"+(index+1));//再下一行<tr>的id
           index = index+1;//再下一行的編號
     }
}

 

相關文章
相關標籤/搜索