form表单中动态添加、删除一行明细的JQuery通用方法

/* 动态添加行的通用方法
 * 参数:trId-点击行<tr>的id属性,默认第一行的<tr>标签id;
 * 使用要求:1、要求默认显示第一行,编号为0;
 * 2、行标签<tr>内所有标签的id以‘-’加行序号(从0开始)结尾;
 * 3、属于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;//再下一行的编号
     }
}

猜你喜欢

转载自my.oschina.net/u/3821897/blog/1799640