JavaScriptを使って表のデータ管理を実現します.

JavaScriptを使って表データ管理の以下の機能を実現しました.

    

・追加ボタンをクリックして、空いている修正可能な記録を追加することができます.    

・表のセルをクリックしてテキストを変更できます.    

・修正して保存インターフェースを実現しました.    

・新たな記録が追加されていて、何も修正されていない値がnullである場合は、すべての保存は無視されます.    

・すべてを保存する場合は修正した値だけを保存し、元のデータは再保存しません.    

・リフレッシュ時にデータが保存されていない場合は保存を促す.    

・削除をクリックしたときに一時的に追加された無効データであればそのまま削除し、保存された記録であれば記録削除のインターフェースが実現されます.

入れ子が多いとformフォームを使わず、JavaScriptで直接解析してdomを分離しました.
まず運転の効果図を見てください.
JavaScriptのコードは以下の通りです.注釈が多くて説明しません.
varJCRUD=function(tb、colnum、saveAllBtn、add、ajaxSaver、allAjaxSaver、ajaxDeler)｛.

vardel=tb.getElementsByTagName('a');

varspan=tb.getElements ByTagName;

vartr=[]/*変更されたtrオブジェクトを保存*/

vardelEvent=function(){

バーディー=this.parent Node.parent Node;

this.data=[];

for(vari=0;i

)
this.data[i]=dder.Children[i].children[0].first Child.nodeValue;

vartag=0;

for(varj=0;j＜this.data.length;j+)｛

if(this.data[j]!==null')/*セルのデフォルト値が修正されたら、ここで対応する修正を行います.
タグ=1;

break;

}

｝

for(vark=0;kif(ctr[k]==dder)ctr.splice(k,1);

dder.parent Node.removeChild;

if(tajaxDeler.call);

;;

varspanEvent=function()/*をクリックして修正枠*/を生成します.

varvalue=this.first Child.nodeValue;

varinput=document.creat Element('input');

input.value=value;

this.parent Node.apendChild(input);

this.parent Node.removeChild(this);

input.focus();サッカープラットフォームレンタルan>

input.οnblur=function()/*フォーカスを失って修正枠*/

を除去します.
varspan=document.create Element('span');

span.apendChild(document.create Text Node)、

/*セルのデフォルト値が変更された場合、ここでも対応する修正を行います.
span.οnclick=spanEvent;

this.parent Node.apendChild(span);

this.parent Node.removeChild(this);

if(value!=this.value){/もしコンテンツが変更されたら保存ボタンを生成します*/

vartr=span.parent Node

tds=tr.Children;

btns=tds[colnum-1].getElements ByTagName('a');

for(vari=0;i

)
if(btns[i].first Child.nodeValue!='保存'){

varsaver=document.create Element('a');

saver.href=「javascript:」;

saver.apped(document.create Text Node);

｝else｛

varsaver=btns[i];

}

｝

tds[tds.length-1].apendChild(saver);

vartag=0;

for(vark=0;k

if(ctr[k]==tr)tag=1;

if(=-0)ctr.push(tr)

saver.οnclick=function()/*追加保存処理イベント*/

this.data=[];

for(vari=0;i

)
this.data[i]=this.parent Node.parent Node.Children[i].children[0].first Child.nodeValue;

ajaxSaver.call(this);

for(vari=ctr.length-1;i>=0;i--)｛

if(this.parent Node==ctr[i]){

ctr.splice(i,1);

｝

}

this.parent Node.removeChild(this);

サッカーのプラットフォームの賃貸パン>;

｝

}

;;

for(variindel)del[i]οnclick=delEvent;/*現在の要素にイベントを追加しました*/

for(varjispan)span[j]οnclick=spanEvent;

add.οnclick=function(){}

vartbody=tb.children[0];

vartr=document.creat Element('tr');

for(varj=0;j

)
vartd=document.creat Element('td');

if(j=(colnum-1){

vardel=document.create Element('a');

del.href='javascript:';

del.apendChild(document.create Text Node);

del.οnclick=delEvent;/*新規要素追加イベント*/

td.apendChild(del);

｝else{

}
varspan=document.create Element('span');

span.apendChild(document.create Text Node);

/*追加時にデフォルト値を変更すると、ここで修正された*/

td.apendChild(span);

span.οnclick=spanEvent;

}

tr.apped(td);

}

tbody.apendChild(tr);

>;

varget AllData=function(){/*はすべてのデータ解析を保存します*/

varallData=[];

for(vari=0;i

)
allData[i]=[];

for(varj=0;j

)
allData[i].push(ctr[i].children[j].children[0].first Child.nodeValue);

ctr[i].children[colnum-1].removeChild(ctr[i].children[colnum-1].children[1];

}

ctr=[];

returnallData;

;;

saveAllBtn.οnclick=function()/*追加保存されたすべてのデータ保存イベント*/

this.allData=get AllData();

if(this.allData.length)｛

allAjaxSaver.call(this);

｝else｛

alert('Nodata!');

}

;;

window.οnbefοレユニοad=function()/*リフレッシュメッセージ保存データ*/

if(ctr.length)｛

vary=confirm('データはまだ保存されていませんが、データを保存しますか?')

if(y){

}
saveAllBtn.click();

｝

}

;;

>;呼び出し時にいくつかのパラメータを送ります.いくつかのパラメータは関数です.各パラメータにはコメントがあります.コードは以下の通りです.
vartable=document.getElemenntById('tb')、/*操作するテーブル*/

colnum=5、/*ここで表の列数*/

を修正します.
saveAllBtn=document.getElemenntById('SaveAll')は、すべてのボタン*/を保存します.

addBtn=document.getElemenntById('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は自分で実現する必要があることが分かります.これはバックグラウンドの実現に関連しています.この例と主要な関係がなくても実現できなくなります.伝えたいデータだけを伝えて使用します.
原文のリンク:http://www.cnblogs.com/jaiho/archive/2011/02/20/table_manager.html
興味があるかもしれない文章:Javascript操作はウェブサイトに提出されたデータの異常問題を解決します.