/* 动态添加行的通用方法
* 参数: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;//再下一行的编号
}
}
form表单中动态添加、删除一行明细的JQuery通用方法
猜你喜欢
转载自my.oschina.net/u/3821897/blog/1799640
今日推荐
周排行