">
js 寄付管理
<スクリプトタイプ="text/javascript">
//寄付単位の配列
var listOrgs = [
{ "id": "1", "comName": "One Fund" },
{ "id": "2", "comName": "宋清玲基金" },
{ "id": "3", "comName": "慈済財団" },
{ "id": "4", "comName": "赤十字" },
{ "id": "5", "comName": "ウルフ トーテム" }
];
//匿名メソッドを listOrgs 配列オブジェクトに動的に追加します
listOrgs.getOrgsById = 関数 (id) {
for (var i = 0; i
If (listOrgs[i].id == id) {
Return 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": "胡錦濤", "orgId": "1", "money": "10000", "date": "2012-3-3" },
{ "id": "5", "perName": "zhouxingchi", "orgId": "2", "money": "10000", "date": "2012-3-3" },
。
{ "id": "7", "perName": "Werewolf", "orgId": "3", "money": "10000", "date": "2012-3-3" },
{ "id": "8", "perName": "Crazy Devil", "orgId": "3", "money": "10000", "date": "2012-3-3" },
{ "id": "9", "perName": "SanCrazy", "orgId": "3", "money": "10000", "date": "2012-3-3" }
];
// ページングクエリ配列
listData.fenyeQuery = function (pageNow, pageSize) {
var res = new Array();
//1. pageSize 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 * pageSize) : listData.length;
for (var i = start ; i < end; i ) {
res[res.length] = リストデータ[i];
}
応答を返します。
};
listData.queryByOrId = function (orid) {
var arr = 新しい配列();
for (var i = 0; i
if (listData[i].orgId == orid) {
arr[arr.length] = listData[i];
}
}
arrを返します。
};
listData.idNum = listData.length;
listData.addRec = function(rec) {
リストデータ.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
If (listData[i].id = obj.id) {
listData[i] = obj;
休憩
};
//パーソナリティをキャンセルするかどうかを検出するグローバル変数を定義します
var isCancelUpdate = false;
// 3 つのテキスト入力コントロールを定義します
var InputPerName = document.createElement("input");
InputPerName.type = "テキスト"
var InputMoney = document.createElement("input");
InputPerName.type = "テキスト"
var InputDate = document.createElement("input");
InputPerName.type = "テキスト"
var SeleteOrg = document.createElement("select");
listData.delRecById = 関数 (id) {
for (var i = 0; i
If (listData[i].id == id) {
//消去
1. この ID の位置から開始し、後ろのすべての要素を 1 つの
に移動します。
最後の要素が繰り返されます、それはクリアする必要があります
for (var j = i; j
リストデータ[j] = リストデータ[j 1];
listData.length = listData.length - 1;
};
//入力テキストボックスにテキストを変更します
function 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;
//入力をテキストに変換し直します
function InputToTxt(tdName, inputName) {
//「キャンセル」をクリックした場合
If (isCancelUpdate) {
tdName.innerHTML = tdName.getAttribute("oldValue");
// クリックして変更を確認します
tdName.innerHTML = inputName.value;
//選択コントロールをテキストに戻します
関数 seleToTxt(tdName, selName) {
// tdName.appendChild(selName);
var orgId = SeleteOrg.value;
// 前の
を削除します
tdName.innerHTML = (listOrgs.getOrgsById(orgId)).comName;
// 変更をキャンセル
関数 CancelUp(obj) {
IScanceelupDate = TRUE // クリックしてキャンセルします
doCancel(obj);
isCancelUpdate = false;
function 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>";
// isCancelUpdate = false;
//キャンセルが成功したことを確認したら、trCur を null に設定します
trCur = null;
var trCur = null;
関数 UpObj(obj) {
If (trCur != null) {
// 編集中であることを説明し、変更をキャンセルします
iscancelupdate = true;
//その行の編集をキャンセルします
doCancel(trCur.childNodes[5].firstChild);//trCur.childNodes[5].firstChild、これは前の行
の
の変更です。
// 現在の行を取得します
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 = "OK キャンセル< ;/a>";
// 変更を確認
関数 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] .value, "お金": trCur.childNodes[3].childNodes[0].value, "日付": 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 = "削除 ";
//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);
}
関数 gel(id) {
return document.getElementById(id);
//1. ユニット名のバインディングをクエリします。selEle は次のとおりです: selet 要素ノード
関数 LoadOrgList(selEle) {
for (var i = 0; i
var opt = new Option(listOrgs[i].comName, listOrgs[i].id);
selEle.options.add(opt);
//2. テーブルをバインドするメソッド、およびテーブルと listData をバインドするメソッド
関数 LoadDataList() {
//for (var i = 0; i
追加Row(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 = "削除 変更";
}
window.onload = function() {
//バインディングクエリ
LoadOrgList(gel("selSearchOrg"));
//寄付の受取人をバインド
LoadOrgList(gel("selAddOrg"));
LoadOrgList(SeleteOrg);
//テーブルと listData をバインド
LoadDataList();
//イベントを新しいボタンにバインドします
gel("btnAdd").onclick = function() {
If ((!(gel("txtName").value)) || (!(gel("txtMoney").value) || (!(gel("txtDate").value)))) {
alert("入力を空にすることはできません");
//1. 入力コンテンツを取得し、それをオブジェクトにパッケージ化します (listData 形式に従って)
var arr = { "perName": gel("txtName").value, "orgId": gel("selAddOrg").value, "money": gel("txtMoney").value, "date": gel(" txtDate").value };
//2. listData 配列に追加します
var res = listData.addRec(arr);
//3. テーブルに表示します
var trnew = gel("tbList").insertRow(-1);
印刷、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、 in in、in、in、in、in、... in、、 - in、...
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になるように
not "-Trnew.insertcell（-1）.innerhtml = res.date;
trnew.insertCell(-1).innerHTML = "削除 変更";
};
//イベントをクエリボタンにバインドします
gel("btnSearch").onclick = function () {
If (gel("selSearchOrg").value == -1) {
//1. クエリ対象の寄付されたユニットの orgid を取得します
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").deleteRow(j);
//4. 新しいデータの表示
for (var i = 0; i
addRow(arrRes[i]);
}
//イベントを前のページにバインドします
gel("btnprePage").onclick = function() {
If (pageNow > 1) {
今すぐページ
showPage();
alert("すでに最初のページです!")
};
//イベントを次のページにバインドします
gel("btnnextPage").onclick = function () {
If(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").deleteRow(j);
//1. pageNow と pageSize
に基づいて配列を返します。
var res = listData.fenyeQuery(pageNow, pageSize);
for (var i = 0; i
addRow(res[i]);
寄付先
＆lt; select id = "selsearchorg"＆gt;
＆lt; option value = "-1"＆gt; - 選択 - ＆lt;/option＆gt;
捐赠人：
受捐单位：
金额：
受捐日期：
序号 |
捐赠人 |
受捐单位 |
金额 |
受捐日期間 |
操作 |
css.css如下：
* {
マージン: 0px;
パディング: 0px;
}
ボディ {
幅: 900ピクセル;
マージン: 0px 自動;
パディングトップ: 20px;
}
h1 {
パディング: 15px;
テキスト整列: 中央;
}
#container {
幅: 900ピクセル;
高さ: 自動;
}
.header、.search {
幅: 900ピクセル;
高さ: 30ピクセル;
行の高さ: 30px;
ボーダー: 1px ソリッド #0094ff;
マージントップ: 3px;
パディング: 0px 5px;
}
.tbList {
幅: 912ピクセル;
高さ: 自動;
}
.tbList th {
ボーダー: 1px ソリッド #000;
背景: #0094ff;
高さ: 30ピクセル;
フォントの太さ: 太字;
行の高さ: 30px;
色: #fff;
}
.inputShort {
幅: 100ピクセル;
}
.btn {
幅: 70ピクセル;
高さ: 25px;
行の高さ: 25px;
フォントの太さ: 太字;
テキスト整列: 中央;
}
td {
境界線: 1 ピクセルの実線。
高さ: 25px;
テキストインデント: 1em;
境界崩壊: 崩壊;
}
ここで説明されている大家向けの JavaScript プログラムの設計が役立つことを望みます。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
