需求
项目中为了要实现手动在表格里面添加数据，每点击一次增加添加一行，然后在表格中添加数据，最后将其保存到数据库中
效果如下图：
添加一行，录入数据
jsp代码如下：
<table id="edit"></table>
数据表格的拼接和数据回显的就是代码如下：
//点击图元信息的时候拼接表格
function sdSr(num,data_type,dataname){
var html = '';
var trHtml = '';
$.post(contextPath+"/ChartElementInfo/dataList",{'id':num,'name':dataname},function(result){
html+='<thead><tr>'
var datalist = result.dalist;
var mlist = result.mlist;
//循环添加表头，将其拼接在一起
for(var i=0;i<datalist.length;i++){
html += '<th><label class="cc'+i+'" for="'+datalist[i].FIELD_NAME+'" data-type="'+datalist[i].DATA_TYPE+'">'+datalist[i].FIELD_COMMENT+'</label><input type="hidden"/></th>';
}
html += '<th>操作</th>';
html +='</tr></thead>'
$("#edit").html(html);//将其添加到表格中
//循环遍历数据中的数据，将其添加到表格中对应的表头下面
for(var j =0;j<mlist.length;j++){
var trHtml = '<tr>';
//循环遍历表头，以便于数据添加到表头下面
for(var i=0;i<datalist.length;i++){
$("th").each(function(i,v){
if(i == $("th").length - 1){//判断th的长度，如果是最后一个让其显示删除图标
trHtml += '<td><em onclick="del(this)"></em></td>'
}else{
if($(v).find("label").attr("data-type") == "STRING"){//判断字段的类型是否是String类型的
trHtml += '<td><input name="" type="text" value = "'+mlist[j][datalist[i].FIELD_NAME]+'" onkeyup="Str(this);"/><div class="tips"></div></td>'
}else if($(v).find("label").attr("data-type") == "INTEGER"){
trHtml += '<td><input name="" value = "'+mlist[j][datalist[i].FIELD_NAME]+'" onkeyup="shuzi(this);"/><div class="tips"></div></td>'
}else if($(v).find("label").attr("data-type") == "DECIMAL"){
trHtml += '<td><input name="" value = "'+mlist[j][datalist[i].FIELD_NAME]+'" onkeyup="xiaoshu(this);"/><div class="tips"></div></td>'
}
/* trHtml += '<td><input id="" name="" type="text" value="'+i+'"/></td>' */
}
})
trHtml +='</tr>';
$("#edit").append(trHtml);
break;
}
}
});
}
点击增加的时候追加一行，并且验证文本框的值
//点击增加时追加一行
function creat(){
var aa = '';
var trHtml = '<tr>';
//循环表头的th，在其下面添加对用的tr
$("th").each(function(i,v){
if(i == $("th").length - 1){
trHtml += '<td><em onclick="del(this)"></em></td>'
}else{
if($(v).find("label").attr("data-type") == "STRING"){
//autofocus添加焦点，添加一行后会自动定位到该行
trHtml += '<td><input name="" type="text" autofocus onkeyup="Str(this);"/><div class="tips"></div></td>'
}else if($(v).find("label").attr("data-type") == "INTEGER"){
trHtml += '<td><input name="" autofocus onkeyup="shuzi(this);"/><div class="tips"></div></td>'
}else if($(v).find("label").attr("data-type") == "DECIMAL"){
trHtml += '<td><input name="" onkeyup="xiaoshu(this);"/><div class="tips"></div></td>'
}
/* trHtml += '<td><input id="" name="" type="text" value="'+i+'"/></td>' */
}
})
trHtml +='</tr>';
$("#edit").append(trHtml);
}
function Str(ele){
if('' == $(ele).val() || null == $(ele).val()){
var txt = $(ele).siblings(".tips").text("不能为空,请输入").text();
show(ele,txt);
setTimeout(function(){hide(ele);},5000);//使其显示5秒后自动消失
return;
} else{
$(ele).siblings(".tips").hide();
}
}
//校验数字
function shuzi(ele){
if((/[^\d]/.test($(ele).val()))){//替换非数字字符
var txt = $(ele).siblings(".tips").text("请输入正确的数字").text();
var temp_amount=$(ele).val().replace(/[^\d]/g,'');
$(ele).val(temp_amount);
show(ele,txt);
setTimeout(function(){hide(ele);},5000);
return;
} else if('' == $(ele).val() || null == $(ele).val()){
var txt = $(ele).siblings(".tips").text("不能为空,请输入正确的数字").text();
show(ele,txt);
setTimeout(function(){hide(ele);},5000);
return;
} else{
$(ele).siblings(".tips").hide();
}
}
//校验小数
function xiaoshu(ele){
var reg = /^\d+(\.\d{1,2})?$/;
if(!reg.test($(ele).val())){//替换非数字字符
var txt = $(ele).siblings(".tips").text("请输入数字，并且保留两位小数").text();
var temp_amount=$(ele).val().replace(/[^\d\.]/g,'');
$(ele).val(temp_amount);
show(ele,txt);
setTimeout(function(){hide(ele);},5000);
return;
}else if('' == $(ele).val() || null == $(ele).val()){
var txt = $(ele).siblings(".tips").text("不能为空,请输入正确的数字").text();
show(ele,txt);
setTimeout(function(){hide(ele);},5000);
return;
} else{
$(ele).siblings(".tips").hide();
}
}
//点击删除时删除行
function del(ele){
$(ele).closest("tr").remove();
}
/* 控制提示框内的提示词的显示效果 */
var i = 0;
function show(ediv,txt) {
$(ediv).siblings(".tips").text(txt);
$(ediv).siblings(".tips").show();
/* $(ediv).siblings(".tips").animate({opacity:"1"},1000); */
}
function hide(e1) {
$(e1).siblings(".tips").hide();
}