java自动增加一行数据_form表单中动态添加、删除一行明细的JQuery通用方法

/* 动态添加行的通用方法

* 参数：trId-点击行

的id属性，默认第一行的标签id；

* 使用要求：1、要求默认显示第一行，编号为0；

* 2、行标签

内所有标签的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 = '

'+trNext+'';//新行元素

$(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('');

}

}

/*

* 动态删除行的通用方法。与html代码无耦合，动态新增行才有删除按钮。

* 处理逻辑：删除一行时，遍历之后的每一行，使该行编号减1

* 参数：trId-点击行

的id属性；

*/

function delOneTr(trId){

$("#"+trId).remove();

var index = parseInt(trId.split('-')[1]) + 1;//点击的下一行编号

var nextTrId = trId.replace("-"+(index-1),"-"+(index));//点击的下一行

的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))//循环行

新的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 = '

'+trNext+'';//新行元素

console.log(trNext);

$("#"+nextTrId).replaceWith(trNext);

$("#"+newTrId+" td:first-child").empty().append(index);//改变新添加行的行号

var nextTrId = nextTrId.replace("-"+index,"-"+(index+1));//再下一行

的id

index = index+1;//再下一行的编号

}

}