本文實例講述了js捐贈管理完整實作方法。分享給大家供大家參考。具體實作方法如下: index.html頁面如下: 複製程式碼 程式碼如下: http://www.w3.org/1999/xhtml"> js捐款管理 <br /> //受捐單位數組 <br /> var listOrgs = [ <br /> { "id": "1", "comName": "壹基金" }, <br /> { "id": "2", "comName": "宋慶齡基金" }, <br /> { "id": "3", "comName": "慈濟基金" }, <br /> { "id": "4", "comName": "紅十字會" }, <br /> { "id": "5", "comName": "狼圖騰" } <br /> ]; <br /> //為listOrgs陣列物件動態新增一個匿名方法 <br /> listOrgs.getOrgsById = function (id) { <br /> for (var i = 0; i < listOrgs.length; i ) { <br /> if (listOrgs[i].id == id) { <br /> return listOrgs[i];//回傳一個物件 <br /> } <br /> } <br /> }; <br /> <br /> //捐款資料數組 <br /> var listData = [ <br /> { "id": "1", "perName": "成龍", "orgId": "1", "money": "10000", "date": "2012-3-3" }, <br /> { "id": "2", "perName": "李連傑", "orgId": "2", "money": "10000", "date": "2012-3-3" }, <br /> { "id": "3", "perName": "陳光標", "orgId": "3", "money": "10000", "date": "2012-3-3" }, <br /> { "id": "4", "perName": "胡錦濤", "orgId": "1", "money": "10000", "date": "2012-3-3" }, <br /> { "id": "5", "perName": "周星池", "orgId": "2", "money": "10000", "date": "2012-3-3" }, <br /> { "id": "6", "perName": "黎明", "orgId": "3", "money": "10000", "date": "2012-3-3" }, <br /> { "id": "7", "perName": "狼人", "orgId": "3", "money": "10000", "date": "2012-3-3" }, <br /> { "id": "8", "perName": "狂魔", "orgId": "3", "money": "10000", "date": "2012-3-3" }, <br /> { "id": "9", "perName": "三瘋", "orgId": "3", "money": "10000", "date": "2012-3-3" } <br /> ]; <br /> //分頁查詢陣列 <br /> listData.fenyeQuery = function (pageNow, pageSize) { <br /> var res = new Array(); <br /> //1.按pageSize為5,頁為第1頁為listData[0]-listData[4],第2頁為listData[5]-listData[9] <br /> //第3頁是listData[10]-listData[14] <br /> <br /> var start = (pageNow - 1) * pageSize; <br /> var end = listData.length > (pageNow * pageSize) ? (pageNow * pageSize) : listData.length; <br /> <br /> for (var i = start ; i < end; i ) { <br /> res[res.length] = listData[i]; <br /> } <br /> 返回資源; <br /> }; <br /> <br /> listData.queryByOrId = 函數 (orid) { <br /> var arr = 新陣列(); <br /> for (var i = 0; i < listData.length; i ) { <br /> if (listData[i].orgId == orid) { <br /> arr[arr.length] = listData[i]; <br /> } <br /> } <br /> <br /> 返回 arr; <br /> }; <br /> <br /> listData.idNum = listData.length; <br /> <br /> listData.addRec = 函數(rec) { <br /> 清單資料.idNum ; <br /> var newRec = { “id”:listData.idNum,「perName」:rec.perName,「orgId」:rec.orgId,「money」:rec.money,「date」:rec.date }🎜> listData[listData.length] = newRec; <br /> 回新記錄; <br /> }; <br /><p> listData.updateRec = function(obj) { <br /> for (var i = 0; i < listData.length; i ) { <br /> if (listData[i].id = obj.id) { <br /> listData[i] = obj; <br /> break; <br /> } <br /> } <br /> }; <br /> <br /> //定義一個全域的變數 ,並偵測是否取消個性 <br /> var isCancelUpdate = false; <br /> //定義三個文字input控制項 <br /> var InputPerName = document.createElement("input"); <br /> InputPerName.type = "text"; <br /> <br /> var InputMoney = document.createElement("input"); <br /> InputPerName.type = "text"; <br /> <br /> var InputDate = document.createElement("input"); <br /> InputPerName.type = "text"; <br /> <br /> var SeleteOrg = document.createElement("select"); <br /> <br /> listData.delRecById = function (id) { <br /> for (var i = 0; i < listData.length; i ) { <br /> if (listData[i].id == id) { <br /> //移除 <br /> /* <br /> 1.將從此ID的位置開始,且將後面的每個元素往前方移動一位 <br /> 2.最後一個元素重複了,以清除 <br /> */ <br /> for (var j = i; j < listData.length - 1; j ) { <br /> listData[j] = listData[j 1]; <br /> } <br /> } <br /> } <br /> listData.length = listData.length - 1; <br /> }; <br /> <br /> //將文字換成input文字方塊 <br /> function txtToInput(tdName, inputName) { <br /> tdName.setAttribute("oldValue", tdName.innerHTML);//先保存原來的內容,如果取消,就恢復 <br /> inputName.value = tdName.innerHTML; <br /> tdName.appendChild(inputName); <br /> tdName.removeChild(tdName.firstChild); <br /> } <br /> <br /> function txtToSelect(tdName, selObj) { <br /> tdName.appendChild(selObj); <br /> tdName.removeChild(tdName.firstChild); <br /> selObj.value = tdName.getAttribute("orgId"); <br /> } <br /> <br /> function selectorText(tdName) { <br /> var orid = SeleteOrg.value; <br /> var orgName = listOrgs.getOrgsById(orid).comName; <br /> // tdName.setAttribute("orgId", SeleteOrg.value); <br /> tdName.innerHTML = orgName; <br /> } <br /> <br /> //把input變回文字 <br /> function InputToTxt(tdName, inputName) { <br /> //若點選的是取消 <br /> if (isCancelUpdate) { <br /> tdName.innerHTML = tdName.getAttribute("oldValue"); <br /> return; <br /> } <br /> //點選確定修改 <br /> tdName.innerHTML = inputName.value; <br /> } <br /> <br /> //把select控制變回文字 <br /> function seleToTxt(tdName, selName) { <br /> // tdName.appendChild(selName); <br /> var orgId = SeleteOrg.value; <br /> //刪除先前的 <br /> tdName.innerHTML = (listOrgs.getOrgsById(orgId)).comName; <br /> } <br /> <br /> //取消修改 <br /> function CancelUp(obj) { <br /> isCancelUpdate = true;//點選的是取消 <br /> doCancel(obj); <br /> isCancelUpdate = false; <br /> } <br /> <br /> function doCancel(obj) { <br /> var trCur = obj.parentElement.parentElement; <br /> var tds = trCur.childNodes; <br /> //全部使用原始的td下面的數值(儲存於Attribute中) <br /> tds[1].innerHTML = tds[1].getAttribute("oldValue"); <br /> tds[2].innerHTML = listOrgs.getOrgsById(tds[2].getAttribute("orgId")).comName; <br /> tds[3].innerHTML = tds[3].getAttribute("oldValue"); <br /> tds[4].innerHTML = tds[4].getAttribute("oldValue"); <br /> tds[5].innerHTML = "<a href='#' onclick='DelObj(this)' >刪除 <a href='#' onclick='UpObj(this)'>修改 "; <br /> // isCancelUpdate = false; <br /> //確定取消成功後就要置trCur為null <br /> trCur = null; <br /> } <br /> var trCur = null; <br /> <br /> function UpObj(obj) { <br /> if (trCur != null) { <br /> //表示有行處於編輯狀態,且取消其修改 <br /> isCancelUpdate = true; <br /> //取消那一行的編輯 <br /> doCancel(trCur.childNodes[5].firstChild);//trCur.childNodes[5].firstChild,就是上一行的<a 修改> <br /> } <br /> <br /> //取得目前所在的行 <br /> trCur = obj.parentElement.parentElement; <br /> var tds = trCur.childNodes; <br /> //捐贈人input修改 <br /> txtToInput(tds[1], InputPerName); <br /> //金額 <br /> txtToInput(tds[3], InputMoney); <br /> //受捐日期 <br /> txtToInput(tds[4], InputDate); <br /> //下拉選擇單位 <br /> txtToSelect(tds[2], SeleteOrg); <br /> <br /> //修改連結變成取消 <br /> tds[5].innerHTML = "<a href='#' onclick='doUpObj(this)' >確定 <a href='#' onclick='CancelUp(this)'>取消 "; <br /> } <br /> <br /> //確定修改 <br /> function doUpObj(obj) { <br /> isCancelUpdate = false; <br /> trCur = obj.parentElement.parentElement; <br /> //1.修改陣列中對應的記錄 <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 }; <br /> //呼叫方法修改ListData中對應的記錄 <br /> listData.updateRec(rec); <br /> //2.修改表格中的記錄 <br /> <br /> InputToTxt(trCur.childNodes[1], InputPerName); <br /> seleToTxt(trCur.childNodes[2], SeleteOrg); <br /> InputToTxt(trCur.childNodes[3], InputMoney); <br /> InputToTxt(trCur.childNodes[4], InputDate); <br /> trCur.childNodes[5].innerHTML = "<a href='#' onclick='DelObj(this)' >刪除 <a href='#' onclick='UpObj(this)'>修改</ a>"; <p> //trCur.childNodes[2].setAttribute("orgId", SeleteOrg.value); <br /> //確定修改成功後就要置trCur為null <br /> trCur = null; <br /> } <p> //刪除一行資料 <p> function DelObj(obj) { <br /> //刪除陣列中對應的陣列 <br /> //1.要取得選取的行 <br /> var curTr = obj.parentElement.parentElement; <br /> //2.從第一列取到id的值 <br /> var delId = curTr.cells[0].innerHTML; <br /> // window.alert(delId); <br /> //3.依id刪除一筆(陣列中listData) <br /> listData.delRecById(delId); <br /> //4.刪除表格檢視中的顯示列 <br /> curTr.parentElement.removeChild(curTr); <br /> } <p> function gel(id) { <br /> return document.getElementById(id); <br /> } <br /> <br /> //1.查詢單位名稱的綁定,selEle是:selet元素節點 <br /> function LoadOrgList(selEle) { <br /> for (var i = 0; i < listOrgs.length; i ) { <br /> var opt = new Option(listOrgs[i].comName, listOrgs[i].id); <br /> selEle.options.add(opt); <br /> } <br /> } <br /> //2.綁定表格及綁定表格及listData的方法 <p> function LoadDataList() { <br /> //for (var i = 0; i < listData.length; i ) { <br /> // addRow(listData[i]); <br /> //} <br /> //分頁顯示 <br /> showPage(); <br /> } <p> function addRow(obj) { <br /> var trnew = gel("tbList").insertRow(-1); <br /> var tdnew = trnew.insertCell(-1); <br /> tdnew.innerHTML = obj.id; <br /> trnew.insertCell(-1).innerHTML = obj.perName; <p> var trOrgName = trnew.insertCell(-1); <br /> trOrgName.setAttribute("orgId", obj.orgId); <br /> trOrgName.innerHTML = (listOrgs.getOrgsById(obj.orgId)).comName; <br /> trnew.insertCell(-1).innerHTML = obj.money; <br /> trnew.insertCell(-1).innerHTML = obj.date; <br /> trnew.insertCell(-1).innerHTML = "<a href='#' onclick='DelObj(this)' >刪除 <a href='#' onclick='UpObj(this)'>修改< /a>"; <br /> } <p> window.onload = function() { <br /> //綁定查詢 <br /> LoadOrgList(gel("selSearchOrg")); <br /> //綁定捐贈單位 <br /> LoadOrgList(gel("selAddOrg")); <br /> LoadOrgList(SeleteOrg); <br /> //綁定表格及listData <br /> LoadDataList(); <p> //為新增按鈕綁定一個事件 <br /> gel("btnAdd").onclick = function() { <br /> if ((!(gel("txtName").value)) || (!(gel("txtMoney").value) || (!(gel("Date").value)txtMoney").value) || (!(gel(" alert("輸入為空白"); <br /> return; <br /> } <br /> <br /> //1.已被輸入的內容,且打包成一個物件(依listData的格式) <br /> var arr = { "perName": gel("txtName").value, "orgId": gel("selAddOrg").value, "money": gel("txtMoney").value, "date": gel(" txtDate").value }; <br /> //2.於listData陣列新增 <br /> var res = listData.addRec(arr); <br /> //3.顯示於表格中 <br /> var trnew = gel("tbList").insertRow(-1); <br /> trnew.insertCell(-1).innerHTML = res.id; <br /> trnew.insertCell(-1).innerHTML = res.perName; <br /> <br /> var tdOrg = trnew.insertCell(-1); <br /> tdOrg.setAttribute("orgId", res.orgId); <br /> tdOrg.innerHTML = listOrgs.getOrgsById(res.orgId).comName; <br /> trnew.insertCell(-1).innerHTML = res.money; <br /> trnew.insertCell(-1).innerHTML = res.date; <br /> trnew.insertCell(-1).innerHTML = "<a href='#' onclick='DelObj(this)' >刪除 <a href='#' onclick='UpObj(this)'>修改< /a>"; <br /> }; <br /> <br /> //給予查詢按鈕綁定事件 <br /> gel("btnSearch").onclick = function () { <br /> if (gel("selSearchOrg").value == -1) { <br /> return; <br /> } <br /> <br /> //1.以取得要詢問的捐贈單位的orgid <br /> var orgId = gel("selSearchOrg").value; <br /> //2.以ListData陣列定義一個依orgid查詢的方法,並在這裡呼叫 <br /> var arrRes = listData.queryByOrId(orgId); <br /> //3.移除舊的表格資料中顯示,務必從下到上清除顯示 <br /> var trs = gel("tbList").rows; <br /> <br /> for (var j = trs.length-1; j>0; j--) { <br /> gel("tbList").deleteRow(j); <br /> } <br /> //4.顯示新的資料arrRes <br /> for (var i = 0; i < arrRes.length; i ) { <br /> addRow(arrRes[i]); <br /> } <br /> }; <p> //給予上一頁綁定事件 <br /> gel("btnprePage").onclick = function() { <br /> if (pageNow > 1) { <br /> pageNow--; <br /> showPage(); <br /> } else { <br /> alert("已是第一頁!") <br /> } <br /> }; <br /> //給予下一頁綁定事件 <br /> gel("btnnextPage").onclick = function () { <br /> if(pageNow<listData.length/pageSize) <br /> { <br /> pageNow ; <br /> showPage(); <br /> }else <br /> { <br /> alert("已是最後一頁!"); <br /> } <br /> }; <br /> }; <br /> var pageNow = 1; <br /> var pageSize = 5; <br /> function showPage() { <br /> var trs = gel("tbList").rows; <br /> <br /> for (var j = trs.length - 1; j > 0; j--) { <br /> gel("tbList").deleteRow(j); <br /> } <br /> <br /> //1.依pageNow及pageSize傳回一個陣列 <br /> var res = listData.fenyeQuery(pageNow, pageSize); <br /> for (var i = 0; i < res.length; i ) { <br /> addRow(res[i]); <br /> } <br /> } <br /> 捐款管理 受捐單位 --請選擇-- 轉送者: 受捐單位: 選擇> 金額: 受捐日期: 序號 捐贈者 捐贈單位 金額 捐贈日期 操作 表> 正文> css.css如下: 複製程式碼如下程式碼: * { 邊距:0 像素; 內邊距:0px; } 身體 { 寬度:900 像素; 邊距:0px 自動; 頂部內邊距:20px; } h1 { 內邊距:15px; 文字對齊:置中; } #容器{ 寬度:900 像素; 高度:自動; } .header、.search { 寬度:900 像素; 高度:30px; 行高:30px; 邊框:1px實線#0094ff; 頂部邊距:3px; 內邊距:0px 5px; } .tbList { 寬度:912px; 高度:自動; } .tbList th { 邊框:1px 實心#000; 背景:#0094ff; 高度:30px; 字體粗細:粗體; 高:30px; 顏色:#fff; } .inputShort { 寬度:100px; } .btn { 寬度:70 像素; 高度:25 像素; 行高:25px; 字體粗細:粗體; 文字對齊:置中; } TD { 邊框:1px實線; 高度:25 像素; 文字縮排:1em; 邊界崩壞:崩壞; } 希望本文對大家介紹的javascript程式設計有幫助。