用js实现了表格数据管理的以下几个功能：
-
- 点击添加按钮可以添加一个空的可以修改的记录。
- 点击表格单元格可以修改文本。
- 修改后实现了保存的接口。
- 如果添加了新的记录而未做任何修改值都为null，保存全部时将被忽略。
- 保存全部时只保存修改过的值，原有的数据不再重复保存。
- 刷新时如果数据未保存则提示保存。
- 点击删除时如果是临时添加的无效数据则直接删除，如果保存过的记录则实现了记录删除的接口。
考虑到嵌套的比较多就没有使用form表单，用js直接解析dom来分离出了要传递的数据。
先看下运行的效果图：
js的代码如下，其中注释较多就不解释了：
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; i<dder.children.length-1; i++) |
this.data[i] = dder.children[i].children[0].firstChild.nodeValue; |
var tag = 0; |
for(var j=0; j<this.data.length; j++){ |
if(this.data[j]!=='null'){/* 如果修改了单元格的默认值，这里也做相应修改 */ |
tag=1; |
break; |
} |
} |
for(var k=0; k<ctr.length; k++) if(ctr[k]===dder) ctr.splice(k,1); |
dder.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; i<btns.length; i++){ |
if(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; k<ctr.length; k++) |
if(ctr[k]===tr) tag=1; |
if(tag==-0) ctr.push(tr); |
saver.onclick=function(){/* 添加保存处理事件 */ |
this.data = []; |
for(var i=0; i<tds.length-1; 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; j<colnum; j++){ |
var 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; i<ctr.length; i++){ |
allData[i]=[]; |
for(var j=0; j<ctr[i].children.length-1; j++) |
allData[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(); |
} |
} |
}; |
}; |
调用时要传几个参数，有几个参数为函数，每个参数都有注释，调用代码如下：
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); |
可以看出saver、allSaver、deler都是需要自己实现的，这与后台的实现相关，与本例子也没有主要关系也就不实现了，只把要传的数据传过来供使用。
下面做了一个比较完整的例子，可以修改一下，实际看一下运行效果：