Contoh lengkap pengurusan derma yang dilaksanakan dalam kemahiran js

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程序设计有所帮助。

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

Contoh lengkap pengurusan derma yang dilaksanakan dalam kemahiran js_javascript