【www.gdgbn.com--文本特效】
网页特效实现表格行增加删除修改
点击添加按钮可以添加一个空的可以修改的记录。
点击表格单元格可以修改文本。
修改后实现了保存的接口。
如果添加了新的记录而未做任何修改值都为null,保存全部时将被忽略。
保存全部时只保存修改过的值,原有的数据不再重复保存。
刷新时如果数据未保存则提示保存。
点击删除时如果是临时添加的无效数据则直接删除,如果保存过的记录则实现了记录删除的接口
model
<script type="text/javascript">
// var jcrud=function(tb,colnum,saveallbtn,add,ajaxsaver,allajaxsaver,ajaxdeler){
var del = tb.getelementsbytagname("a");
var span = tb.getelementsbytagname("span");
var ctr=[];/* 保存修改的tr对象 */
var delevent = function(){
var dder = this.parentnode.parentnode;
this.data=[];
for(var i=0; ithis.data[i] = dder.children[i].children[0].firstchild.nodevalue;
var tag = 0;
for(var j=0; jif(this.data[j]!=="null"){/* 如果修改了单元格的默认值,这里也做相应修改 */
tag=1;
break;
}
}
for(var k=0; kdder.parentnode.removechild(dder);
if(tag==1) ajaxdeler.call(this);
};
var spanevent = function(){/* 点击生成修改框 */
var value = this.firstchild.nodevalue;
var input = document.createelement("input");
input.value = value;
this.parentnode.appendchild(input);
this.parentnode.removechild(this);
input.focus();
input.onblur = function(){/* 失去焦点移除修改框 */
var span = document.createelement("span");
span.appendchild(document.createtextnode(this.value?this.value:"null"));/* 如果修改了单元格的默认值,这里也做相应修改 */
span.onclick =spanevent;
this.parentnode.appendchild(span);
this.parentnode.removechild(this);
if(value!=this.value){/* 如果内容改变生成保存按钮 */
var tr = span.parentnode.parentnode
tds = tr.children;
btns = tds[colnum-1].getelementsbytagname("a");
for(var i=0; iif(btns[i].firstchild.nodevalue!="保存"){
var saver = document.createelement("a");
saver.href="javascript:;";
saver.appendchild(document.createtextnode("保存"));
}else{
var saver = btns[i];
}
}
tds[tds.length-1].appendchild(saver);
var tag=0;
for(var k=0; kif(ctr[k]===tr) tag=1;
if(tag==-0) ctr.push(tr);
saver.onclick=function(){/* 添加保存处理事件 */
this.data = [];
for(var i=0; i this.data[i] = this.parentnode.parentnode.children[i].children[0].firstchild.nodevalue;
ajaxsaver.call(this);
for(var i=ctr.length-1; i>=0; i--){
if(this.parentnode.parentnode===ctr[i]){
ctr.splice(i,1);
}
}
this.parentnode.removechild(this);
};
}
}
};
for(var i in del) del[i].onclick = delevent;/* 给现在有元素添加事件 */
for(var j in span) span[j].onclick = spanevent;
add.onclick = function(){
var tbody = tb.children[0];
var tr = document.createelement("tr");
for(var j=0; jvar td = document.createelement("td");
if(j==(colnum-1)){
var del = document.createelement("a");
del.href="javascript:;";
del.appendchild(document.createtextnode("删除"));
del.onclick = delevent;/* 给新加元素添加事件 */
td.appendchild(del);
}else{
var span = document.createelement("span");
span.appendchild(document.createtextnode("null"));/* 如果在添加时修改默认值,在这里修改的 */
td.appendchild(span);
span.onclick =spanevent;
}
tr.appendchild(td);
}
tbody.appendchild(tr);
};
var getalldata = function(){/* 保存全部的数据解析 */
var alldata=[];
for(var i=0; ialldata[i]=[];
for(var j=0; jalldata[i].push(ctr[i].children[j].children[0].firstchild.nodevalue);
ctr[i].children[colnum-1].removechild(ctr[i].children[colnum-1].children[1]);
}
ctr=[];
return alldata;
};
saveallbtn.onclick = function(){/* 添加保存全部数据保存事件 */
this.alldata = getalldata();
if(this.alldata.length){
allajaxsaver.call(this);
}else{
alert("no data!");
}
};
window.onbeforeunload = function(){/* 刷新提示保存数据 */
if(ctr.length){
var y = confirm("数据还未保存,是否保存数据?")
if(y){
saveallbtn.click();
}
}
};
};
window.onload = function(){
var table = document.getelementbyid("tb"),/* 要操作的表格 */
colnum = 5,/* 这里修改表格的列数 */
saveallbtn = document.getelementbyid("saveall"),/* 保存全部的按钮 */
addbtn = document.getelementbyid("add"),/* 添加的按钮 */
saver = function(){
/* 此处可以加上ajax效果与数据库教程交互 data是个数组,需要可以改成json */
alert("要传的数据为data数据:""+this.data+""此处调用ajax实现后台保存!实现略……");
},
allsaver = function(){
/* 此处可以加上ajax效果与数据库交互 data是个数组,需要可以改成json */
alert("要传的数据为alldtat数组:""+this.alldata+""此处调用ajax实现后台保存!实现略……");
},
deler = function(){
/* 此处可以加上ajax效果与数据库交互 data是个数组,需要可以改成json */
alert("要传的数据为data数据:""+this.data+""此处调用ajax实现后台删除!实现略……");
};
window.jcrud(table,colnum,saveallbtn,addbtn,saver,allsaver,deler);
};
//]]>
</script>
a
b
c
d
操作
tip:
点击添加按钮可以添加一个空的可以修改的记录。
点击表格单元格可以修改文本。
修改后实现了保存的接口。
如果添加了新的记录而未做任何修改值都为null,保存全部时将被忽略。
保存全部时只保存修改过的值,原有的数据不再重复保存。
刷新时如果数据未保存则提示保存。
点击删除时如果是临时添加的无效数据则直接删除,如果保存过的记录则实现了记录删除的接口。