/* 動態添加行的通用方法 * 參數: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;//再下一行的編號 } }