<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>Model</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<meta http-equiv="Content-language" content="zh-CN" />
<style type="text/css" media="all">
div { width:80%;margin:auto; }
table { margin:15px 0; }
th, tr { width:20%; }/* 修改這裡，如果表格有三列就是33.333%，四列就是25% */
span { display:block;line-height:100%; }/* 使點擊整個儲存格都有效果 */
table input { width:98%; }
table a { float:left; margin:0 3px; }
</style>
<script type="text/javascript">
//<![CDATA[
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();
}
}
};
};
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>
</head>
<body>
<div>
<table width="100%" border="1" id="tb">
<tr><!-- 修改這裡有多少列就加多少個th元素 -->
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>操作</th>
</tr>
<!-- 下面為資料的格式的例子，只有這種格式才能保證與js的正確互動 -->
<!--
<tr>
<td><span>null</span></td>
<td><span>null</span></td>
<td><span>null</span></td>
<td><a href="javascript:;">Del</a></td>
</tr>
-->
</table>
<input type="button" id="SaveAll" value="儲存全部" />
<input type="button" id="Add" value="添加" />
<div style="border:3px red double;padding:2px 3px;margin:8px;">
<h4 style="color:red;margin:3px;">Tip：</h4>
<ul style="margin:0;">
<li>點擊添加按鈕可以添加一個空的可以修改的記錄。</li>
<li>點擊表格儲存格可以修改文本。</li>
<li>修改後實現了儲存的介面。</li>
<li>如果添加了新的記錄而未做任何修改值都為null，儲存全部時將被忽略。</li>
<li>儲存全部時只儲存修改過的值，原有的資料不再重複儲存。</li>
<li>重新整理時如果資料未儲存則提示儲存。</li>
<li>點擊刪除時如果是臨時添加的無效資料則直接刪除，如果儲存過的記錄則實現了記錄刪除的介面。</li>
</ul>
</div>
</div>
</body>
</html>
