本文实例讲述了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 /> return res; <br /> }; <br /> <br /> listData.queryByOrId = function (orid) { <br /> var arr = new Array(); <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 /> return 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 /> return newRec; <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)'>修改"; <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)'>修改"; <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("txtDate").value)))) { <br /> 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)'>修改"; <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如下: 复制代码 代码如下: * { margin: 0px; padding: 0px; } body { width: 900px; margin: 0px auto; padding-top: 20px; } h1 { padding: 15px; text-align: center; } #container { width: 900px; height: auto; } .header, .search { width: 900px; height: 30px; line-height: 30px; border: 1px solid #0094ff; margin-top: 3px; padding: 0px 5px; } .tbList { width: 912px; height: auto; } .tbList th { border: 1px solid #000; background: #0094ff; height: 30px; font-weight: bold; line-height: 30px; color: #fff; } .inputShort { width: 100px; } .btn { width: 70px; height: 25px; line-height: 25px; font-weight: bold; text-align: center; } td { border: 1px solid; height: 25px; text-indent: 1em; border-collapse: collapse; } 希望本文所述对大家的javascript程序设计有所帮助。