Artikel ini menjelaskan metode implementasi lengkap manajemen donasi JS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Halaman index.html adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> JS Donation Management </iteme>
<tautan href = "css/css.css" rel = "stylesheet" type = "text/css"/>
<type skrip = "Teks/JavaScript">
// Array unit yang disumbangkan
var listorgs = [
{"id": "1", "comname": "One Foundation"},
{"id": "2", "comname": "Song ching ling fund"},
{"id": "3", "comname": "tzu chi foundation"},
{"id": "4", "comname": "red cross"},
{"id": "5", "comname": "wolf totem"}
];
// Tambahkan metode anonim secara dinamis ke objek array Listorgs
listorgs.getorgsbyid = function (id) {
untuk (var i = 0; i <listorgs.length; i ++) {
if (listorgs [i] .id == id) {
return listorgs [i]; // mengembalikan objek
}
}
};
// Array Data Donasi
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": "Werewolf", "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"}
];
// Array kueri pagination
ListData.FENYEQUERY = function (pagenow, pageSize) {
var res = array baru ();
// 1. Tekan halaman ke 5, halaman pertama adalah ListData [0] -listData [4], dan halaman kedua adalah ListData [5] -listData [9]
// Halaman ketiga adalah ListData [10] -listData [14]
var start = (pagenow - 1) * halaman;
var end = listData.length> (pagenow * pagesize)? (pagenow * halaman): listData.length;
untuk (var i = start; i <end; i ++) {
res [res.length] = listData [i];
}
Return Res;
};
listData.querybyorid = function (orid) {
var arr = array baru ();
untuk (var i = 0; i <listData.length; i ++) {
if (listData [i] .orgid == orid) {
arr [arr.length] = listData [i];
}
}
return 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;
mengembalikan newrec;
};
listData.updaterec = function (obj) {
untuk (var i = 0; i <listData.length; i ++) {
if (listData [i] .id = obj.id) {
ListData [i] = obj;
merusak;
}
}
};
// Tentukan variabel global untuk mendeteksi apakah akan membatalkan kepribadian
var iscancelupdate = false;
// Tentukan tiga kontrol input teks
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) {
untuk (var i = 0; i <listData.length; i ++) {
if (listData [i] .id == id) {
//menghapus
/*
1. Mulai dari lokasi di mana ID ini berada dan memindahkan setiap elemen di belakang satu per satu
2. Elemen terakhir diulang, dan perlu dibersihkan
*/
untuk (var j = i; j <listData.length - 1; j ++) {
listData [j] = listData [j + 1];
}
}
}
listData.length = listData.length - 1;
};
// Tukar teks ke dalam kotak teks input
function txttoInput (tdname, inputName) {
tdname.setAttribute ("oldvalue", tdname.innerhtml); // simpan konten asli terlebih dahulu, jika dibatalkan, kembalikan
inputName.value = tdname.innerHtml;
tdname.appendChild (inputName);
tdname.removechild (tdname.firstchild);
}
fungsi 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;
}
// Putar kembali input ke teks
fungsi inputtotxt (tdname, inputName) {
// Jika diklik Batal
if (isCanceLupDate) {
tdname.innerhtml = tdname.getAttribute ("oldvalue");
kembali;
}
// Klik untuk mengkonfirmasi untuk memodifikasi
tdname.innerHtml = inputName.Value;
}
// Ubah Kontrol Pilih Kembali ke Teks
function seletotxt (tdname, selname) {
// tdname.appendChild (selname);
var orgid = seleteorg.value;
// hapus yang sebelumnya
tdname.innerHtml = (listorgs.getorgsbyid (orgid)). Comname;
}
// Batalkan modifikasi
function cancelup (obj) {
isCancelupDate = true; // klik Batal
Docancel (OBJ);
isCancelupDate = false;
}
function docancel (obj) {
var trcur = obj.parentelement.parentelement;
var tds = trcur.childnodes;
// Semua menggunakan nilai di bawah TD asli (Simpan di atribut)
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 = '#' ontClick = 'delobj (this)'> delete </a> <a href = '#' ontClick = 'upoBj (this)'> memodifikasi </a>";
// iscancelupdate = false;
// Setelah mengkonfirmasi bahwa pembatalan berhasil, atur trcur ke null
trcur = null;
}
var trcur = null;
FUNGSI UPOBJ (OBJ) {
if (trcur! = null) {
// menunjukkan bahwa ada garis dalam keadaan pengeditan, dan modifikasinya harus dibatalkan
isCancelupDate = true;
// Batalkan pengeditan baris itu
docancel (trcur.childnodes [5] .firstchild); // trcur.childnodes [5] .firstchild, adalah <a modifikasi> dari baris sebelumnya
}
// Dapatkan baris saat ini
trcur = obj.parentelement.parentelement;
var tds = trcur.childnodes;
// modifikasi input donor
txttoInput (tds [1], inputPerName);
//Jumlah
txttoInput (TDS [3], inputMoney);
// Tanggal donasi
txttoInput (TDS [4], inputDate);
// Tarik ke bawah untuk memilih unit
txttoselect (tds [2], seleteorg);
// Ubah tautan untuk membatalkan
tds [5] .innerHtml = "<a href = '#' ontClick = 'doupoBj (this)'> ok </a> <a href = '#' ontClick = 'cancelup (this)'> Batal </a>";
}
// konfirmasi untuk memodifikasi
fungsi doupobj (obj) {
isCancelupDate = false;
trcur = obj.parentelement.parentelement;
// 1. Ubah catatan yang sesuai dalam array
var rec = {"id": trcur.childnodes [0] .innerhtml, "Pername": trcur.childnodes [1] .childnodes [0] .value, "orgid": trcur.childnodes [2] .Childnodes [0] .valu, "Money" " trcur.childnodes [3] .childnodes [0] .value, "tanggal": trcur.childnodes [4] .childnodes [0] .value};
// Memanggil metode untuk memodifikasi catatan yang sesuai di ListData
listData.updaterec (rec);
// 2. Memodifikasi catatan dalam tabel
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 = '#' ontClick = 'delobj (this)'> hapus </a> <a href = '#' ontClick = 'upoBj (this)'> memodifikasi </a>";
//trcur.childnodes−2−00.setAttribute("orgid ", seleteorg.value);
// Setelah mengkonfirmasi bahwa modifikasi berhasil, atur trcur ke null
trcur = null;
}
// hapus garis data
fungsi delobj (obj) {
// hapus array yang sesuai di array
//1. untuk mendapatkan baris yang dipilih
var curtr = obj.parentelement.parentelement;
// 2. Dapatkan nilai ID dari kolom pertama
var delid = Curtr.Cells [0] .InnerHTML;
// window.alert (delid);
// 3. Hapus catatan berdasarkan ID (ListData di Array)
listData.delrecbyId (delid);
// 4. Hapus baris yang ditampilkan di tampilan tabel
Curtr.parentelement.removechild (Curtr);
}
fungsi gel (id) {
return document.getElementById (id);
}
// 1. Permintaan Ikatan Nama Unit, Selele adalah: Node Elemen Selet
fungsi loadorglist (selele) {
untuk (var i = 0; i <listorgs.length; i ++) {
var opt = opsi baru (listorgs [i] .comname, listorgs [i] .id);
selele.options.add (opt);
}
}
// 2. Metode untuk mengikat tabel dan mengikat tabel dan listData
function loadDataList () {
// untuk (var i = 0; i <listData.length; i ++) {
// addRow (listData [i]);
//}
// tampilan pagination
showpage ();
}
fungsi 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 = '#' ontClick = 'delobj (this)'> hapus </a> <a href = '#' ontClick = 'upoBj (ini)'> memodifikasi </a>";
}
window.onload = function () {
// kueri yang mengikat
Loadorglist (gel ("selsearchorg"));
// ikat unit yang disumbangkan
Loadorglist (gel ("seladdorg"));
Loadorglist (seleteorg);
// BIND TABLE DAN LISTDATA
Loaddatalist ();
// Tambahkan tombol baru untuk mengikat acara
gel ("btnadd"). onClick = function () {
if ((! (gel ("txtname"). value)) || (! (Gel ("txtmoney"). value) || (! (Gel ("txtDate"). value)))) {
peringatan ("Input tidak bisa kosong");
kembali;
}
// 1. Dapatkan konten input dan kemas dalam suatu objek (sesuai dengan format ListData)
var arr = {"Pername": gel ("txtName"). value, "orgid": gel ("seladdorg"). value, "money": gel ("txtmoney"). value, "date": gel ("txtDate"). value};
// 2. Tambahkan ke Array ListData
var res = listData.addrec (arr);
// 3. Ditampilkan di tabel
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 = '#' ontClick = 'delobj (this)'> hapus </a> <a href = '#' ontClick = 'upoBj (ini)'> memodifikasi </a>";
};
// Bind Event to Query Button
gel ("btnsearch"). onclick = function () {
if (gel ("selsearchorg"). value == -1) {
kembali;
}
// 1. Dapatkan orgid unit donor untuk ditanyakan
var orgid = gel ("selsearchorg"). nilai;
// 2. Tentukan metode berdasarkan kueri orgid dalam array ListData dan panggil di sini
var arrres = listData.querybyorid (orgid);
// 3. Hapus data tabel lama dari tampilan, pastikan untuk menghapus tampilan dari bawah ke atas
var trs = gel ("tblist"). Baris;
untuk (var j = trs.length-1; j> 0; j--) {
gel ("tblist"). deleterow (j);
}
// 4. Tunjukkan data baru
untuk (var i = 0; i <arrres.length; i ++) {
addrow (arrres [i]);
}
};
// Bind Events ke halaman sebelumnya
gel ("btnprepage"). onClick = function () {
if (pagenow> 1) {
Pagenow--;
showpage ();
} kalau tidak {
peringatan ("Ini sudah halaman pertama!")
}
};
// Bind Events ke halaman berikutnya
gel ("btnnextpage"). onClick = function () {
if (pagenow <listdata.length/pagesze)
{
Pagenow ++;
showpage ();
}kalau tidak
{
peringatan ("Ini sudah halaman terakhir!");
}
};
};
var pagenow = 1;
var pageSize = 5;
fungsi showpage () {
var trs = gel ("tblist"). Baris;
untuk (var j = trs.length-1; j> 0; j--) {
gel ("tblist"). deleterow (j);
}
// 1. Mengembalikan array menurut pagenow dan halaman
var res = listData.fenyequery (pagenow, pagesize);
untuk (var i = 0; i <res.length; i ++) {
addrow (res [i]);
}
}
</script>
</head>
<body>
<Div id = "container">
<h1> Manajemen Donasi </h1>
<div>
Unit yang diterima donor
<Pilih id = "selsearchorg">
<Option value = "-1">-silakan pilih-</potion>
</pilih>
<input type = "tombol" id = "btnsearch" value = "query" /> <input type = "Tombol" value = "halaman sebelumnya" id = "btnprepage" /> <input type = "Tombol" value = "halaman berikutnya" id = "btnnexpage" /> <span id = "pagebar"> < /span>
</div>
<div>
Donor: <input type = "text" id = "txtname" size = "8" />
Unit yang diterima donor:
<pilih id = "seladdorg">
</pilih>
Jumlah: <input type = "text" id = "txtmoney" size = "8" />
Tanggal donasi: <input type = "text" id = "txtDate" size = "10" />
<input type = "tombol" id = "btnadd" value = "new" />
</div>
<tabel id = "tblist" cellpacing = "0" cellpadding = "0">
<tr>
<td> nomor seri </td>
<td> donor </td>
<td> Unit yang disumbangkan </td>
<td> Jumlah </td>
<td> Tanggal donasi </td>
<td> operasi </td>
</tr>
</boable>
</div>
</body>
</html>
css.css adalah sebagai berikut:
Salin kode sebagai berikut:* {
margin: 0px;
padding: 0px;
}
tubuh {
Lebar: 900px;
margin: 0px auto;
Padding-top: 20px;
}
h1 {
padding: 15px;
Teks-Align: tengah;
}
#container {
Lebar: 900px;
Tinggi: otomatis;
}
.header, .search {
Lebar: 900px;
Tinggi: 30px;
Line-Height: 30px;
Perbatasan: 1px Solid #0094ff;
margin-top: 3px;
padding: 0px 5px;
}
.tBlist {
Lebar: 912px;
Tinggi: otomatis;
}
.tblist th {
Perbatasan: 1px Solid #000;
Latar belakang: #0094ff;
Tinggi: 30px;
font-weight: tebal;
Line-Height: 30px;
Warna: #FFFF;
}
.inputshort {
Lebar: 100px;
}
.btn {
Lebar: 70px;
Tinggi: 25px;
Line-Height: 25px;
font-weight: tebal;
Teks-Align: tengah;
}
td {
Perbatasan: 1px padat;
Tinggi: 25px;
Teks-inden: 1em;
Border-Collapse: runtuh;
}
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.