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: "> js pengurusan derma //Susunan unit derma <br> var listOrgs = [ <br> { "id": "1", "comName": "One Fund" }, <br> { "id": "2", "comName": "Soong Ching Ling Fund" }, <br> { "id": "3", "comName": "Yayasan Tzu Chi" }, <br> { "id": "4", "comName": "Palang Merah" }, <br> { "id": "5", "comName": "Totem Serigala" } <br> ]; <br> //Tambahkan kaedah tanpa nama secara dinamik pada objek tatasusunan listOrgs <br> listOrgs.getOrgsById = fungsi (id) { <br> untuk (var i = 0; i < listOrgs.length; i ) { <br /> Jika (listOrgs[i].id == id) { <br /> Kembalikan senaraiOrgs[i];//Kembalikan objek <br /> }; <br /> //Susun atur data derma <br /> var listData = [ <br /> { "id": "1", "perName": "Jackie Chan", "orgId": "1", "money": "10000", "date": "2012-3-3" }, <br /> { "id": "2", "perName": "Jet Li", "orgId": "2", "money": "10000", "date": "2012-3-3" }, <br /> {"Id": "3", "Pername": "Chen Guangbiao", "Orgid": "3", "Money": "10000", "Date": "2012-3-3"}, <br /> { "id": "4", "perName": "Hu Jintao", "orgId": "1", "money": "10000", "date": "2012-3-3" }, <br /> { "id": "5", "perName": "zhouxingchi", "orgId": "2", "money": "10000", "date": "2012-3-3" }, <br /> {"ID": "6", "Nama Nama": "Fajar", "Orgid": "3", "Wang": "10000", "Tarikh": "2012-3-3"}, <br /> { "id": "7", "perName": "Werewolf", "orgId": "3", "money": "10000", "date": "2012-3-3" }, <br /> { "id": "8", "perName": "Crazy Devil", "orgId": "3", "money": "10000", "date": "2012-3-3" }, <br /> { "id": "9", "perName": "三Crazy", "orgId": "3", "money": "10000", "date": "2012-3-3" } <br /> ]; <br /> // Tatasusunan pertanyaan halaman <br /> listData.fenyeQuery = fungsi (pageNow, pageSize) { <br /> var res = new Array(); //1. Menurut Saiz halaman 5, halaman pertama ialah listData[0]-listData[4], halaman kedua ialah listData[5]-listData[9] <br /> //Halaman 3 ialah listData[10]-listData[14] <br /> <br /> var mula = (halamanSekarang - 1) * Saiz halaman <br /> var end = listData.length > (pageNow * pageSize) ? <br> untuk (var i = mula ; i < tamat; i ) { <br /> res[res.length] = listData[i]; <br /> } <br /> kembalikan semula; <br /> }; <br /> <br /> listData.queryByOrId = fungsi (orid) { <br /> var arr = new Array(); <br /> untuk (var i = 0; i < listData.length; i ) { <br /> if (listData[i].orgId == orid) { <br /> arr[arr.length] = listData[i]; <br /> } <br /> } <br /> <br /> kembali arr; <br /> }; <br /> <br /> listData.idNum = listData.length; <br /> <br /> listData.addRec = function(rec) { <br /> listData.idNum ; <br /> var newRec = { "id": listData.idNum, "perName": rec.perName, "orgId": rec.orgId, "money": rec.money, "date": rec.date }; <br /> listData[listData.length] = newRec; <br /> kembalikan newRec; <br /> }; </p><p> listData.updateRec = function(obj) { <br /> untuk (var i = 0; i < listData.length; i ) { <br /> Jika (listData[i].id = obj.id) { <br /> listData[i] = obj; rehat; <br /> }; <br /> //Tentukan pembolehubah global untuk mengesan sama ada untuk membatalkan personaliti <br /> var isCancelUpdate = palsu; <br /> //Tentukan tiga kawalan input teks <br /> var InputPerName = document.createElement("input"); InputPerName.type = "teks"; <br /> <br /> var InputMoney = document.createElement("input"); InputPerName.type = "teks"; <br /> <br /> var InputDate = document.createElement("input"); InputPerName.type = "teks"; <br /> var SeleteOrg = document.createElement("select"); <br /> listData.delRecById = fungsi (id) { <br /> untuk (var i = 0; i < listData.length; i ) { <br /> Jika (listData[i].id == id) { <br /> // Padam 1. Mulakan dari kedudukan di mana ID ini berada, dan alihkan setiap elemen di belakang ke satu <br /> Elemen terakhir diulang, ia perlu dikosongkan <br /> untuk (var j = i; j < listData.length - 1; j ) { <br /> listData[j] = listData[j 1]; listData.length = listData.length - 1 <br /> }; <br /> //Tukar teks ke dalam kotak teks input <br /> fungsi txtToInput(tdName, inputName) { <br /> tdName.setAttribute("oldValue", tdName.innerHTML);//Simpan kandungan asal dahulu dan pulihkan jika dibatalkan <br /> inputName.value = tdName.innerHTML; tdName.appendChild(inputName); tdName.removeChild(tdName.firstChild); <br /> <br /> Fungsi txtToSelect(tdName, selObj) { <br /> tdName.appendChild(selObj); tdName.removeChild(tdName.firstChild); <br /> selObj.value = tdName.getAttribute("orgId"); <br /> fungsi selectorText(tdName) { <br /> var orid = SeleteOrg.value; <br /> var orgName = listOrgs.getOrgsById(orid).comName; <br /> // tdName.setAttribute("orgId", SeleteOrg.value); tdName.innerHTML = orgName <br /> <br /> //Tukar input kembali kepada teks <br /> fungsi InputToTxt(tdName, inputName) { <br /> //Jika anda mengklik Batal <br /> Jika (isCancelUpdate) { <br /> tdName.innerHTML = tdName.getAttribute("oldValue"); Kembali; <br /> //Klik untuk mengesahkan pengubahsuaian <br /> tdName.innerHTML = inputName.value <br /> //Tukar kawalan pilih kembali kepada teks <br /> fungsi seleToTxt(tdName, selName) { <br /> // tdName.appendChild(selName); <br /> var orgId = SeleteOrg.value; <br /> //Padamkan <br /> sebelumnya tdName.innerHTML = (listOrgs.getOrgsById(orgId)).comName; <br /> <br /> //Batalkan pengubahsuaian <br /> Fungsi CancelUp(obj) { <br /> IScanceelupDate = TRUE; // Klik untuk membatalkan <br /> doCancel(obj); <br /> isCancelUpdate = palsu; <br /> fungsi doCancel(obj) { <br /> var trCur = obj.parentElement.parentElement; <br /> var tds = trCur.childNodes; //Gunakan semua nilai di bawah td asal (disimpan dalam Atribut) <br /> tds[1].innerHTML = tds[1].getAttribute("oldValue"); tds[2].innerHTML = listOrgs.getOrgsById(tds[2].getAttribute("orgId")).comName; <br /> 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)'> Edit< ;/a>"; <br> // isCancelUpdate = palsu; //Selepas mengesahkan bahawa pembatalan berjaya, tetapkan trCur kepada null <br> trCur = null; var trCur = null; <br>Fungsi UpObj(obj) { <br> Jika (trCur != null) { <br> // Jelaskan bahawa ia berada dalam keadaan penyuntingan, untuk membatalkan pengubahsuaiannya <br> isCancelUpdate = benar; //Batalkan pengeditan baris itu <br> doCancel(trCur.childNodes[5].firstChild);//trCur.childNodes[5].firstChild, iaitu <a pengubahsuaian> daripada baris sebelumnya <br> <br> //Dapatkan baris semasa <br> trCur = obj.parentElement.parentElement <br> var tds = trCur.childNodes; //Pengubahsuaian input penderma <br> txtToInput(tds[1], InputPerName); // Amaun txtToInput(tds[3], InputMoney); // Tarikh derma <br> txtToInput(tds[4], InputDate); //Tarik ke bawah untuk memilih unit <br> txtToSelect(tds[2], SeleteOrg); <br> //Ubah suai pautan untuk membatalkannya <br> tds[5].innerHTML = "<a href='#' onclick='doUpObj(this)' >OK</a> <a href='#' onclick='CancelUp(this)'> Cancel< ;/a>"; <br> //Sahkan pengubahsuaian <br> Fungsi doUpObj(obj) { <br> isCancelUpdate = palsu; trCur = obj.parentElement.parentElement <br> //1. Ubah suai rekod yang sepadan dalam tatasusunan <br> 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 <br> listData.updateRec(rec); //2. Ubah suai rekod dalam jadual <br> <br> InputToTxt(trCur.childNodes[1], InputPerName); seleToTxt(trCur.childNodes[2], SeleteOrg); InputToTxt(trCur.childNodes[3], InputMoney <br> InputToTxt(trCur.childNodes[4], InputDate); trCur.childNodes[5].innerHTML = "<a href='#' onclick='DelObj(this)' >Delete</a> <a href='#' onclick='UpObj(this)' > ;Ubah suai</a>"; <br> <br> //trCur.childNodes[2].setAttribute("orgId", SeleteOrg.value); //Selepas mengesahkan bahawa pengubahsuaian berjaya, tetapkan trCur kepada null <br> trCur = null; } <br><p> //Padamkan baris data </p> <p> fungsi DelObj(obj) { <br> //Padam tatasusunan yang sepadan dalam tatasusunan <br> //1. Untuk mendapatkan baris yang dipilih <br> var curTr = obj.parentElement.parentElement; <br> //2. Dapatkan nilai id daripada lajur pertama <br> var delId = curTr.cells[0].innerHTML; <br> // window.alert(delId); //3. Padamkan rekod berdasarkan id (listData dalam tatasusunan) <br> listData.delRecById(delId); //4. Padamkan baris yang dipaparkan dalam paparan jadual <br> Current Element ; } <br> <br> fungsi gel(id) { <br> pulangkan document.getElementById(id); </p> //1. Tanya pengikatan nama unit, selEle ialah: nod elemen selet <p> Fungsi LoadOrgList(selEle) { <br> untuk (var i = 0; i < listOrgs.length; i ) { <br> var opt = new Option(listOrgs[i].comName, listOrgs[i].id); selEle.options.add(opt); //2. Kaedah mengikat jadual dan mengikat jadual dan listData <br> <br> fungsi LoadDataList() { <br> //for (var i = 0; i < listData.length; i ) { <br> Baris(listData[i]); //Paparan halaman <br> Halaman Paparan(); <br> } <br> <br> fungsi addRow(obj) { <br> var trnew = gel("tbList").insertRow(-1); </p> var tdnew = trnew.insertCell(-1); <p> tdnew.innerHTML = obj.id <br> trnew.insertCell(-1).innerHTML = obj.perName; <br> 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) ' >Ubah suai</a>"; <br> } <br></p> <p> window.onload = function() { <br> //Pertanyaan mengikat <br> LoadOrgList(gel("selSearchOrg")); <br> //Ikat penerima derma <br> LoadOrgList(gel("selAddOrg")); <br> LoadOrgList(SeleteOrg); //Ikat jadual dan listData <br> LoadDataList();</p> <p> //Ikat acara pada butang baharu <br> gel("btnAdd").onclick = function() { <br> Jika ((!(gel("txtName").value)) || (!(gel("txtMoney").value) || (!(gel("txtDate").value)))) { <br> alert("Input tidak boleh kosong"); Kembali; <br> <br> //1. Dapatkan kandungan input dan bungkus ke dalam objek (mengikut format listData) <br> var arr = { "perName": gel("txtName").value, "orgId": gel("selAddOrg").value, "money": gel("txtMoney").value, "date": gel(" txtDate").nilai }; <br> //2. Tambahkan pada tatasusunan listData <br> var res = listData.addRec(arr); //3. Paparkan dalam jadual <br> var trnew = gel("tbList").insertRow(-1); trnew.insertCell(-1).innerHTML = res.id <br> trnew.insertCell(-1).innerHTML = res.perName; <br> 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; <br> ke trnew.insertCell(-1).innerHTML = "<a href='#' onclick='DelObj(this)' >Delete</a> <a href='#' onclick='UpObj(this) ' >Ubah suai</a>"; <br> }; <br> //Ikat peristiwa pada butang pertanyaan <br> gel("btnSearch").onclick = function () { <br> Jika (gel("selSearchOrg").nilai == -1) { <br> Kembali; <br> <br> //1. Dapatkan orgid unit yang didermakan untuk ditanya <br> var orgId = gel("selSearchOrg").value; <br> //2. Tentukan kaedah untuk membuat pertanyaan berdasarkan orgid dalam tatasusunan ListData, dan panggilnya di sini <br> var arrRes = listData.queryByOrId(orgId <br>); //3. Keluarkan data jadual lama dari paparan dan pastikan anda mengosongkan paparan dari bawah ke atas <br> var trs = gel("tbList").rows; <br> <br> untuk (var j = trs.length-1; j>0; j--) { <br>gel("tbList").deleteRow(j); //4. Paparkan arrRes data baharu <br> untuk (var i = 0; i < arrRes.length; i ) { <br /> addRow(arrRes[i]); }; <br /><p> //Ikat acara ke halaman sebelumnya <br /> gel("btnprePage").onclick = function() { <br /> Jika (halamanSekarang > 1) { <br> pageNow--; <br> ShowPage(); alert("Sudah halaman pertama!") <br> }; //Ikat acara ke halaman seterusnya <br> gel("btnnextPage").onclick = function () { <br> If(pageNow<listData.length/pageSize) <br /> pageNow ; <br /> ShowPage(); alert("Ia adalah halaman terakhir!"); }; }; var pageNow = 1; var pageSize = 5; <br /> function showPage() { <br /> var trs = gel("tbList").rows; <br /> untuk (var j = trs.length - 1; j > 0; j--) { <br> gel("tbList").deleteRow(j); <br> //1. Kembalikan tatasusunan berdasarkan pageNow dan pageSize <br> var res = listData.fenyeQuery(pageNow, pageSize <br>). untuk (var i = 0; i < res.length; i ) { <br /> addRow(res[i]); </skrip> </head> <badan> <br> <div id="container"> Penerima derma <br> ' … gt; <br> <input type="button" id="btnSearch" value="查询" class="btn" /> <input type="button" value="上一页" class="btn" id="btnprePage" /> <input type="button" value="下一页" class="btn" id="btnnextPage" /><span id="pageBar"></span> <br> </div> <br> <div class="search"> <br> 捐赠人：<input type="text" id="txtName" class="inputShort" size="8" /> <br> 受捐单位： <br> <pilih id="selAddOrg"> <br> </select> <br> 金额：<input type="text" id="txtMoney" class="inputShort" size="8" /> <br> 受捐日期：<input type="text" id="txtDate" class="inputShort" size="10" /> <br> <input type="button" id="btnAdd" value="新增" class="btn" /><br> </div> <br> <table id="tbList" class="tbList" cellspacing="0" cellpadding="0"> <br> <tr class="th"> <br> <td>序号</td> <br> <td>捐赠人</td> <br> <td>受捐单位</td> <br> <td>金额</td> <br> <td>受捐日期</td> <br> <td>操作</td> <br> </tr> <br> </table> <br> </div> <br> </badan> <br> </html></p> </div> <p>css.css如下：<br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="36817" class="copybut" id="copybut36817" onclick="doCopy('code36817')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code36817">* { <br> jidar: 0px; <br> padding: 0px; <br> } <br> <br> badan { <br> lebar: 900px; <br> margin: 0px auto; <br> padding-top: 20px; <br> } <br> <br> h1 { <br> padding: 15px; <br> text-align: tengah; <br> } <br> <br> #bekas { <br> lebar: 900px; <br> ketinggian: auto; <br> } <br> <br> .header, .search { <br> lebar: 900px; <br> ketinggian: 30px; <br> ketinggian garisan: 30px; <br> sempadan: 1px pepejal #0094ff; <br> jidar atas: 3px; <br> padding: 0px 5px; <br> } <br> <br> .tbList { <br> lebar: 912px; <br> ketinggian: auto; <br> } <br> <br> .tbSenarai ke { <br> sempadan: 1px pepejal #000; <br> latar belakang: #0094ff; <br> ketinggian: 30px; <br> font-weight: tebal; <br> ketinggian garis: 30px; <br> warna: #fff; <br> } <br> <br> .inputShort { <br> lebar: 100px; <br> } <br> <br> .btn { <br> lebar: 70px; <br> ketinggian: 25px; <br> ketinggian garis: 25px; <br> font-weight: tebal; <br> text-align: tengah; <br> } <br> <br> td { <br> sempadan: 1px pepejal; <br> ketinggian: 25px; <br> inden teks: 1em; <br> border-collapse: runtuh; <br> }</div> <p>希望本文所述对大家的javascript程序设计有所帮助。</p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
