この記事では、JS寄付管理の完全な実装方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
index.htmlページは次のとおりです。
次のようにコードをコピーします：<！doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> JS寄付管理</title>
<link href = "css/css.css" rel = "styleSheet" type = "text/css"/>
<script type = "text/javascript">
//寄付されたユニットの配列
var listorgs = [
{"id"： "1"、 "comname"： "1つの基礎"}、
{"id"： "2"、 "comname"： "Song Ching Ling Fund"}、
{"id"： "3"、 "comname"： "tzu chi Foundation"}、
{"id"： "4"、 "comname"： "Red Cross"}、
{"id"： "5"、 "comname"： "Wolf Totem"}
];
// annymousメソッドをlistorgs配列オブジェクトに動的に追加します
listorgs.getorgsbyid = function（id）{
for（var i = 0; i <listorgs.length; i ++）{
if（listorgs [i] .id == id）{
listorgs [i]; //オブジェクトを返します
}
}
};
//寄付データアレイ
var listdata = [
{"id"： "1"、 "pername"： "jackie chan"、 "orgid"： "1"、 "money"： "10000"、 "date"： "2012-3-3"}、
{"id"： "2"、 "pername"： "jet li"、 "orgid"： "2"、 "money"： "10000"、 "date"： "2012-3-3"}、
{"id"： "3"、 "pername"： "chen guangbiao"、 "orgid"： "3"、 "money"： "10000"、 "date"： "2012-3-3"}、
{"id"： "4"、 "pername"： "hu jintao"、 "orgid"： "1"、 "money"： "10000"、 "date"： "2012-3-3"}、
{"id"： "5"、 "pername"： "Zhou xingchi"、 "orgid"： "2"、 "money"： "10000"、 "date"： "2012-3-3"}、
{"id"： "6"、 "pername"： "dawn"、 "orgid"： "3"、 "money"： "10000"、 "date"： "2012-3-3"}、
{"id"： "7"、 "pername"： "orewolf"、 "orgid"： "3"、 "money"： "10000"、 "date"： "2012-3-3"}、
{"id"： "8"、 "pername"： "madman"、 "orgid"： "3"、 "money"： "10000"、 "date"： "2012-3-3"}、
{"id"： "9"、 "pername"： "three crazy"、 "orgid"： "3"、 "money"： "10000"、 "date"： "2012-3-3"}
];
//ページネーションクエリアレイ
listData.fenyequery = function（pagenow、pagesize）{
var res = new Array（）;
// 1。 5を押すと、最初のページはlistdata [0] -listdata [4]で、2番目のページはlistdata [5] -listdata [9]です。
// 3番目のページはlistData [10] -listdata [14]です
var start =（pagenow -1） * pagesize;
var end = listdata.length>（pagenow * pageize）？ （Pagenow * Pagesize）：ListData.length;
for（var i = start; i <end; i ++）{
res [res.length] = listdata [i];
}
RESを返します。
};
listData.QueryByorid = function（orid）{
var arr = new array（）;
for（var i = 0; i <listdata.length; i ++）{
if（listdata [i] .orgid == orid）{
arr [arr.length] = listdata [i];
}
}
arrを返します。
};
listData.idnum = listData.length;
ListData.Addrec = function（rec）{
ListData.Idnum ++;
var newRec = {"id"：listdata.idnum、 "pername"：rec.pername、 "orgid"：rec.orgid、 "money"：rec.money、date "：rec.date};
listData [listData.length] = newRec;
NewRecを返します。
};
listData.updaterec = function（obj）{
for（var i = 0; i <listdata.length; i ++）{
if（listData [i] .id = obj.id）{
listData [i] = obj;
壊す;
}
}
};
//グローバル変数を定義して、性格をキャンセルするかどうかを検出する
var iscancelupdate = false;
// 3つのテキスト入力コントロールを定義します
var inputpername = document.createelement（ "input"）;
inputpername.type = "text";
var inputmoney = document.createelement（ "input"）;
inputpername.type = "text";
var inputdate = document.createelement（ "input"）;
inputpername.type = "text";
var seleteorg = document.createelement（ "select"）;
ListData.DelRecbyID = function（id）{
for（var i = 0; i <listdata.length; i ++）{
if（listdata [i] .id == id）{
//消去
/*
1.このIDが配置されている場所から始めて、各要素を1つずつ動かします
2。最後の要素が繰り返され、クリアする必要があります
*/
for（var j = i; j <listdata.length -1; j ++）{
listData [j] = listData [j + 1];
}
}
}
listData.length = listData.Length -1;
};
//テキストを入力テキストボックスに交換します
関数txttoinput（tdname、inputname）{
tdname.setattribute（ "oldvalue"、tdname.innerhtml）; //最初に元のコンテンツを保存してください、キャンセルした場合は復元します
inputname.value = tdname.innerhtml;
tdname.appendChild（inputName）;
tdname.removechild（tdname.firstchild）;
}
関数txttoselect（tdname、selobj）{
tdname.appendchild（selobj）;
tdname.removechild（tdname.firstchild）;
selobj.value = tdname.getattribute（ "orgid"）;
}
function selectOrtext（tdname）{
var orid = seleteorg.value;
var orgname = listorgs.getorgsbyid（orid）.comname;
// tdname.setattribute（ "orgid"、seleteorg.value）;
tdname.innerhtml = orgname;
}
//入力をテキストに戻します
関数inputTotxt（tdname、inputname）{
//クリックした場合はキャンセルします
if（iscancelupdate）{
tdname.innerhtml = tdname.getattribute（ "oldvalue"）;
戻る;
}
//クリックして確認して変更します
tdname.innerhtml = inputname.value;
}
// [コントロール]をテキストに戻します
function seletotxt（tdname、selname）{
// tdname.appendchild（selname）;
var orgid = seleteorg.value;
//前のものを削除します
tdname.innerhtml =（listorgs.getorgsbyid（orgid））。comname;
}
//変更をキャンセルします
関数cancelup（obj）{
iscancelupdate = true; // [キャンセル]をクリックします
docancel（obj）;
iscancelupdate = false;
}
関数docancel（obj）{
var trcur = obj.parentelement.parentelement;
var tds = trcur.childnodes;
//すべて元のTDの下の値を使用します（属性を保存）
tds [1] .innerhtml = tds [1] .getattribute（ "oldvalue"）;
tds [2] .innerhtml = listorgs.getorgsbyid（tds [2] .getattribute（ "orgid"））。comname;
tds [3] .innerhtml = tds [3] .getattribute（ "oldvalue"）;
tds [4] .innerhtml = tds [4] .getattribute（ "oldvalue"）;
tds [5] .innerhtml = "<a href = '＃' onclick = 'delobj（this）'> delete </a> <a href = '＃' onclick = 'upobj（this）'>修正</a>";
// iscancelupdate = false;
//キャンセルが成功したことを確認した後、trcurをnullに設定します
trcur = null;
}
var trcur = null;
function upobj（obj）{
if（trcur！= null）{
//編集状態に行があり、その変更をキャンセルする必要があることを示します
iscancelupdate = true;
//その行の編集をキャンセルします
docancel（trcur.childnodes [5] .firstchild）; // trcur.childnodes [5] .firstchildは、前の行の<a modification>です
}
//現在の行を取得します
trcur = obj.parentelement.parentelement;
var tds = trcur.childnodes;
//ドナーの入力変更
txttoinput（tds [1]、inputpername）;
//額
txttoinput（tds [3]、inputMoney）;
//寄付の日付
txttoinput（tds [4]、inputdate）;
//プルダウンしてユニットを選択します
txttoselect（tds [2]、seleteorg）;
//リンクを変更してキャンセルします
tds [5] .innerhtml = "<a href = '＃' onclick = 'doupobj（this）'> ok </a> <a href = '＃' onclick = 'cancelup（this）'> cancel </a>";
}
//変更することを確認します
function doupobj（obj）{
iscancelupdate = false;
trcur = obj.parentelement.parentelement;
// 1。配列内の対応するレコードを変更します
var rec = {"id"：trcur.childnodes [0] .innerhtml、 "pername"：trcur.childnodes [1] .childnodes [0] .value、 "orgid"：trcur.childnodes [2] .childnodes [0]。 trcur.childnodes [3] .childnodes [0] .value、 "date"：trcur.childnodes [4] .childnodes [0] .value};
//メソッドを呼び出してListDataの対応するレコードを変更する
ListData.UpDaterec（rec）;
// 2。テーブル内のレコードを変更します
inputTotxt（trcur.childnodes [1]、inputpername）;
seletotxt（trcur.childnodes [2]、seleteorg）;
inputTotxt（trcur.childnodes [3]、inputMoney）;
inputTotxt（trcur.childnodes [4]、inputdate）;
trcur.childnodes [5] .innerhtml = "<a href = '＃' onclick = 'delobj（this）'> delete </a> <a href = '＃' onclick = 'upobj（this）'> modify </a>";
//trcur.childnodes [2] .setattribute("orgid "、seleteorg.value）;
//変更が成功したことを確認した後、trcurをnullに設定します
trcur = null;
}
//データの行を削除します
関数delobj（obj）{
//配列内の対応する配列を削除します
//1.選択した行を取得します
var curtr = obj.parentelement.parentelement;
// 2。最初の列からIDの値を取得します
var delid = curtr.cells [0] .innerhtml;
// window.alert（delid）;
// 3。 ID（配列内のListData）に基づいてレコードを削除します
listdata.delrecbyid（delid）;
// 4。テーブルビューで表示された行を削除します
curtr.parentelement.removechild（curtr）;
}
function gel（id）{
document.getElementByID（ID）を返します。
}
// 1。ユニット名のバインディングをクエリすると、セレルは次のとおりです。
関数loadorglist（セレル）{
for（var i = 0; i <listorgs.length; i ++）{
var opt = new option（listorgs [i] .comname、listorgs [i] .id）;
SELELE.OPTIONS.ADD（OPT）;
}
}
// 2。テーブルにバインドし、テーブルとリストダタをバインドする方法
関数loadDatalist（）{
//（var i = 0; i <listdata.length; i ++）{
// addrow（listData [i]）;
//}
//ページネーションディスプレイ
showpage（）;
}
関数addrow（obj）{
var trnew = gel（ "tblist"）。insertrow（-1）;
var tdnew = trnew.insertcell（-1）;
tdnew.innerhtml = obj.id;
trnew.insertcell（-1）.innerhtml = obj.pername;
var trorgname = trnew.insertcell（-1）;
trorgname.setattribute（ "orgid"、obj.orgid）;
trorgname.innerhtml =（listorgs.getorgsbyid（obj.orgid））。comname;
trnew.insertcell（-1）.innerhtml = obj.money;
trnew.insertcell（-1）.innerhtml = obj.date;
trnew.insertcell（-1）.innerhtml = "<a href = '＃' onclick = 'delobj（this）'> delete </a> <a href = '＃' onclick = 'upobj（this）'> modify </a>";
}
window.onload = function（）{
//バインディングクエリ
loadorglist（gel（ "selsearchorg"））;
//寄付されたユニットをバインドします
loadorglist（gel（ "seladdorg"））;
loadorglist（seleteorg）;
//テーブルとリストダタをバインドします
loaddatalist（）;
//新しいボタンを追加してイベントをバインドします
gel（ "btnadd"）。onclick = function（）{
if（（！（gel（ "txtname"）。値））||（！（gel（ "txtmoney"）。value）||（！（gel（ "txtdate"）。値）））{
アラート（ "入力は空にすることはできません"）;
戻る;
}
// 1。入力コンテンツを取得し、それをオブジェクトにパッケージ化します（ListDataの形式に従って）
var arr = {"pername"：gel（ "txtname"）。value、 "orgid"：gel（ "seladdorg"）。value、 "money"：gel（ "txtmoney"）。value、 "date"：gel（ "txtdate"）。値};
// 2。 ListDataアレイに追加します
var res = listdata.addrec（arr）;
// 3。テーブルに表示されます
var trnew = gel（ "tblist"）。insertrow（-1）;
trnew.insertcell（-1）.innerhtml = res.id;
trnew.insertcell（-1）.innerhtml = res.pername;
var tdorg = trnew.insertcell（-1）;
tdorg.setattribute（ "orgid"、res.orgid）;
tdorg.innerhtml = listorgs.getorgsbyid（res.orgid）.comname;
trnew.insertcell（-1）.innerhtml = res.money;
trnew.insertcell（-1）.innerhtml = res.date;
trnew.insertcell（-1）.innerhtml = "<a href = '＃' onclick = 'delobj（this）'> delete </a> <a href = '＃' onclick = 'upobj（this）'> modify </a>";
};
//イベントをクエリボタンにバインドします
gel（ "btnsearch"）。onclick = function（）{
if（gel（ "selsearchorg"）。value == -1）{
戻る;
}
// 1。ドナーユニットの組織をクエリにする
var orgid = gel（ "selsearchorg"）。value;
// 2。 ListDataアレイのORGIDクエリに基づいてメソッドを定義し、こちらから電話してください
var arrres = listdata.querybyorid（orgid）;
// 3。古いテーブルデータをディスプレイから削除して、必ずディスプレイを下から上にクリアしてください
var trs = gel（ "tblist"）。rows;
for（var j = trs.length-1; j> 0; j-）{
gel（ "tblist"）。leterow（j）;
}
// 4。新しいデータアレルを表示します
for（var i = 0; i <arrres.length; i ++）{
addrow（arrres [i]）;
}
};
//イベントを前のページにバインドします
gel（ "btnprepage"）。onclick = function（）{
if（pagenow> 1）{
Pagenow-;
showpage（）;
} それ以外 {
アラート（「すでに最初のページです！」）
}
};
//次のページにイベントをバインドします
gel（ "btnnextpage"）。onclick = function（）{
if（pagenow <listdata.length/pagesize）
{
Pagenow ++;
showpage（）;
}それ以外
{
alert（ "それはすでに最後のページです！"）;
}
};
};
var pagenow = 1;
var pagesize = 5;
関数showpage（）{
var trs = gel（ "tblist"）。rows;
for（var j = trs.length-1; j> 0; j-）{
gel（ "tblist"）。leterow（j）;
}
// 1。 Pagenowに従って配列を返し、ページサイズにします
var res = listdata.fenyequery（pagenow、pagesize）;
for（var i = 0; i <res.length; i ++）{
addrow（res [i]）;
}
}
</script>
</head>
<body>
<div id = "container">
<h1>寄付管理</h1>
<div>
寄付者が推測したユニット
<select id = "selsearchorg">
<オプション値= "-1"> - 選択 - </option>を選択してください
</select>
<入力型= "button" id = "btnsearch" value = "query" /> <input type = "button" value = "pregine page" id = "btnprepage" /> <input type = "button" value = "nextページ" id = "btnnextpage" /> <span id = "pagebar"> < /span>
</div>
<div>
ドナー：<入力型= "テキスト" id = "txtname" size = "8" />
寄付者が受け取ったユニット：
<select id = "seladdorg">
</select>
金額：<input type = "text" id = "txtmoney" size = "8" />
寄付日：<input type = "text" id = "txtdate" size = "10" />
<入力型= "button" id = "btnadd" value = "new" />
</div>
<table id = "tblist" cellpacing = "0" cellpadding = "0">
<tr>
<td>シリアル番号</td>
<td>ドナー</td>
<td>寄付ユニット</td>
<td>金額</td>
<td>寄付の日付</td>
<td>操作</td>
</tr>
</table>
</div>
</body>
</html>
CSS.CSSは次のとおりです。
次のようにコードをコピーします：* {
マージン：0px;
パディング：0px;
}
体 {
幅：900px;
マージン：0px auto;
パディングトップ：20px;
}
H1 {
パディング：15px;
テキストアライグ：センター;
}
＃容器 {
幅：900px;
高さ：自動;
}
.header、.search {
幅：900px;
高さ：30px;
Line-Height：30px;
境界線：1pxソリッド＃0094ff;
マージントップ：3px;
パディング：0px 5px;
}
.tblist {
幅：912px;
高さ：自動;
}
.tblist th {
国境：1pxソリッド＃000;
背景：＃0094ff;
高さ：30px;
font-weight：bold;
Line-Height：30px;
色：#ffff;
}
.inputshort {
幅：100px;
}
.btn {
幅：70px;
高さ：25px;
ラインハイト：25px;
font-weight：bold;
テキストアライグ：センター;
}
TD {
国境：1pxソリッド;
高さ：25px;
テキストインデント：1EM;
国境崩壊：崩壊;
}
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。