Contoh lengkap pengurusan derma yang dilaksanakan dalam kemahiran js_javascript

Contoh dalam artikel ini menerangkan kaedah pelaksanaan lengkap pengurusan derma js. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Halaman index.html adalah seperti berikut:

Salin kod Kod adalah seperti berikut: http://www.w3.org/1999/xhtml "> js pengurusan derma //Susunan unit derma var listOrgs = [ { "id": "1", "comName": "One Fund" }, { "id": "2", "comName": "Soong Ching Ling Fund" }, { "id": "3", "comName": "Yayasan Tzu Chi" }, { "id": "4", "comName": "Palang Merah" }, { "id": "5", "comName": "Totem Serigala" } ]; //Tambahkan kaedah tanpa nama secara dinamik pada objek tatasusunan listOrgs listOrgs.getOrgsById = fungsi (id) { untuk (var i = 0; i Jika (listOrgs[i].id == id) { Kembalikan senaraiOrgs[i];//Kembalikan objek }; //Susun atur data derma 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": "zhouxingchi", "orgId": "2", "money": "10000", "date": "2012-3-3" }, {"ID": "6", "Nama Nama": "Fajar", "Orgid": "3", "Wang": "10000", "Tarikh": "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": "三Crazy", "orgId": "3", "money": "10000", "date": "2012-3-3" } ]; // Tatasusunan pertanyaan halaman listData.fenyeQuery = fungsi (pageNow, pageSize) { var res = new Array(); //1. Menurut Saiz halaman 5, halaman pertama ialah listData[0]-listData[4], halaman kedua ialah listData[5]-listData[9] //Halaman 3 ialah listData[10]-listData[14]

listData.updateRec = function(obj) { untuk (var i = 0; i Jika (listData[i].id = obj.id) { listData[i] = obj; rehat; }; //Tentukan pembolehubah global untuk mengesan sama ada untuk membatalkan personaliti var isCancelUpdate = palsu; //Tentukan tiga kawalan input teks var InputPerName = document.createElement("input"); InputPerName.type = "teks";

var InputMoney = document.createElement("input"); InputPerName.type = "teks";

var InputDate = document.createElement("input"); InputPerName.type = "teks"; var SeleteOrg = document.createElement("select"); listData.delRecById = fungsi (id) { untuk (var i = 0; i Jika (listData[i].id == id) { // Padam 1. Mulakan dari kedudukan di mana ID ini berada, dan alihkan setiap elemen di belakang ke satu Elemen terakhir diulang, ia perlu dikosongkan untuk (var j = i; j listData[j] = listData[j 1]; listData.length = listData.length - 1 }; //Tukar teks ke dalam kotak teks input fungsi txtToInput(tdName, inputName) { tdName.setAttribute("oldValue", tdName.innerHTML);//Simpan kandungan asal dahulu dan pulihkan jika dibatalkan 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"); fungsi selectorText(tdName) { var orid = SeleteOrg.value; var orgName = listOrgs.getOrgsById(orid).comName; // tdName.setAttribute("orgId", SeleteOrg.value); tdName.innerHTML = orgName //Tukar input kembali kepada teks fungsi InputToTxt(tdName, inputName) { //Jika anda mengklik Batal Jika (isCancelUpdate) { tdName.innerHTML = tdName.getAttribute("oldValue"); Kembali; //Klik untuk mengesahkan pengubahsuaian tdName.innerHTML = inputName.value //Tukar kawalan pilih kembali kepada teks fungsi seleToTxt(tdName, selName) { // tdName.appendChild(selName); var orgId = SeleteOrg.value; //Padamkan sebelumnya tdName.innerHTML = (listOrgs.getOrgsById(orgId)).comName; //Batalkan pengubahsuaian Fungsi CancelUp(obj) { IScanceelupDate = TRUE; // Klik untuk membatalkan doCancel(obj); isCancelUpdate = palsu; fungsi doCancel(obj) { var trCur = obj.parentElement.parentElement; var tds = trCur.childNodes; //Gunakan semua nilai di bawah td asal (disimpan dalam 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 = " Delete Edit&lt ;/a>"; // isCancelUpdate = palsu; //Selepas mengesahkan bahawa pembatalan berjaya, tetapkan trCur kepada null trCur = null; var trCur = null; Fungsi UpObj(obj) { Jika (trCur != null) { // Jelaskan bahawa ia berada dalam keadaan penyuntingan, untuk membatalkan pengubahsuaiannya isCancelUpdate = benar; //Batalkan pengeditan baris itu doCancel(trCur.childNodes[5].firstChild);//trCur.childNodes[5].firstChild, iaitu daripada baris sebelumnya //Dapatkan baris semasa trCur = obj.parentElement.parentElement var tds = trCur.childNodes; //Pengubahsuaian input penderma txtToInput(tds[1], InputPerName); // Amaun txtToInput(tds[3], InputMoney); // Tarikh derma txtToInput(tds[4], InputDate); //Tarik ke bawah untuk memilih unit txtToSelect(tds[2], SeleteOrg); //Ubah suai pautan untuk membatalkannya tds[5].innerHTML = " OK Cancel&lt ;/a>"; //Sahkan pengubahsuaian Fungsi doUpObj(obj) { isCancelUpdate = palsu; trCur = obj.parentElement.parentElement //1. Ubah suai rekod yang sepadan dalam tatasusunan var rec = { "id": trCur.childNodes[0].innerHTML, "perName": trCur.childNodes[1].childNodes[0].value, "orgId": trCur.childNodes[2].childNodes[0] .value, "money": trCur.childNodes[3].childNodes[0].value, "date": trCur.childNodes[4].childNodes[0].value }; //Panggil kaedah untuk mengubah suai rekod yang sepadan dalam ListData listData.updateRec(rec); //2. Ubah suai rekod dalam jadual

InputToTxt(trCur.childNodes[1], InputPerName); seleToTxt(trCur.childNodes[2], SeleteOrg); InputToTxt(trCur.childNodes[3], InputMoney InputToTxt(trCur.childNodes[4], InputDate); trCur.childNodes[5].innerHTML = " Delete ";

//trCur.childNodes[2].setAttribute("orgId", SeleteOrg.value); //Selepas mengesahkan bahawa pengubahsuaian berjaya, tetapkan trCur kepada null trCur = null; } //Padamkan baris data

fungsi DelObj(obj) { //Padam tatasusunan yang sepadan dalam tatasusunan //1. Untuk mendapatkan baris yang dipilih var curTr = obj.parentElement.parentElement; //2. Dapatkan nilai id daripada lajur pertama var delId = curTr.cells[0].innerHTML; // window.alert(delId); //3. Padamkan rekod berdasarkan id (listData dalam tatasusunan) listData.delRecById(delId); //4. Padamkan baris yang dipaparkan dalam paparan jadual Current Element ; }

fungsi gel(id) { pulangkan document.getElementById(id);

//1. Tanya pengikatan nama unit, selEle ialah: nod elemen selet Fungsi LoadOrgList(selEle) { untuk (var i = 0; i var opt = new Option(listOrgs[i].comName, listOrgs[i].id); selEle.options.add(opt); //2. Kaedah mengikat jadual dan mengikat jadual dan listData

fungsi LoadDataList() { //for (var i = 0; i Baris(listData[i]); //Paparan halaman Halaman Paparan(); }

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 = " Delete Ubah suai "; }

window.onload = function() { //Pertanyaan mengikat LoadOrgList(gel("selSearchOrg")); //Ikat penerima derma LoadOrgList(gel("selAddOrg")); LoadOrgList(SeleteOrg); //Ikat jadual dan listData LoadDataList();

//Ikat acara pada butang baharu gel("btnAdd").onclick = function() { Jika ((!(gel("txtName").value)) || (!(gel("txtMoney").value) || (!(gel("txtDate").value)))) { alert("Input tidak boleh kosong"); Kembali; //1. Dapatkan kandungan input dan bungkus ke dalam objek (mengikut format listData) var arr = { "perName": gel("txtName").value, "orgId": gel("selAddOrg").value, "money": gel("txtMoney").value, "date": gel(" txtDate").nilai }; //2. Tambahkan pada tatasusunan listData var res = listData.addRec(arr); //3. Paparkan dalam jadual 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; bukan " - untuk berada dalam, trnew.insertCell(-1).innerHTML = res.money; Si, cetak, pt ,, dalam, "trNew.insertcell (-1) .innerHtml = res.date; ke trnew.insertCell(-1).innerHTML = " Delete Ubah suai "; }; //Ikat peristiwa pada butang pertanyaan gel("btnSearch").onclick = function () { Jika (gel("selSearchOrg").nilai == -1) { Kembali; //1. Dapatkan orgid unit yang didermakan untuk ditanya var orgId = gel("selSearchOrg").value; //2. Tentukan kaedah untuk membuat pertanyaan berdasarkan orgid dalam tatasusunan ListData, dan panggilnya di sini var arrRes = listData.queryByOrId(orgId ); //3. Keluarkan data jadual lama dari paparan dan pastikan anda mengosongkan paparan dari bawah ke atas var trs = gel("tbList").rows;

untuk (var j = trs.length-1; j>0; j--) { gel("tbList").deleteRow(j); //4. Paparkan arrRes data baharu untuk (var i = 0; i addRow(arrRes[i]); }; //Ikat acara ke halaman sebelumnya gel("btnprePage").onclick = function() { Jika (halamanSekarang > 1) { pageNow--; ShowPage(); alert("Sudah halaman pertama!") }; //Ikat acara ke halaman seterusnya gel("btnnextPage").onclick = function () { If(pageNow pageNow ; ShowPage(); alert("Ia adalah halaman terakhir!"); }; }; var pageNow = 1; var pageSize = 5; function showPage() { var trs = gel("tbList").rows; untuk (var j = trs.length - 1; j > 0; j--) { gel("tbList").deleteRow(j); //1. Kembalikan tatasusunan berdasarkan pageNow dan pageSize var res = listData.fenyeQuery(pageNow, pageSize ). untuk (var i = 0; i addRow(res[i]); Penerima derma ' … gt; 捐赠人： 受捐单位： 金额： 受捐日期： 序号 捐赠人 受捐单位 金额 受捐日期 操作

css.css如下：

复制代码 代码如下: * { jidar: 0px; padding: 0px; } badan { lebar: 900px; margin: 0px auto; padding-top: 20px; } h1 { padding: 15px; text-align: tengah; } #bekas { lebar: 900px; ketinggian: auto; } .header, .search { lebar: 900px; ketinggian: 30px; ketinggian garisan: 30px; sempadan: 1px pepejal #0094ff; jidar atas: 3px; padding: 0px 5px; } .tbList { lebar: 912px; ketinggian: auto; } .tbSenarai ke { sempadan: 1px pepejal #000; latar belakang: #0094ff; ketinggian: 30px; font-weight: tebal; ketinggian garis: 30px; warna: #fff; } .inputShort { lebar: 100px; } .btn { lebar: 70px; ketinggian: 25px; ketinggian garis: 25px; font-weight: tebal; text-align: tengah; } td { sempadan: 1px pepejal; ketinggian: 25px; inden teks: 1em; border-collapse: runtuh; } 希望本文所述对大家的javascript程序设计有所帮助。