个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
26
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章js实现的捐赠管理完整实例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
本文实例讲述了js捐赠管理完整实现方法。分享给大家供大家参考。具体实现方法如下:
index.html页面如下:
。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js捐赠管理</title> <link href="css/css.css" rel="Stylesheet" type="text/css" /> <script type="text/javascript"> //受捐单位数组 var listOrgs = [ { "id": "1", "comName": "壹基金" }, { "id": "2", "comName": "宋庆龄基金" }, { "id": "3", "comName": "慈济基金" }, { "id": "4", "comName": "红十字会" }, { "id": "5", "comName": "狼图腾" } ]; //给listOrgs数组对象动态添加一个匿名方法 listOrgs.getOrgsById = function (id) { for (var i = 0; i < listOrgs.length; i++) { if (listOrgs[i].id == id) { return listOrgs[i];//返回一个对象 } } }; //捐款数据数组 var listData = [ { "id": "1", "perName": "成龙", "orgId": "1", "money": "10000", "date": "2012-3-3" }, { "id": "2", "perName": "李连杰", "orgId": "2", "money": "10000", "date": "2012-3-3" }, { "id": "3", "perName": "陈光标", "orgId": "3", "money": "10000", "date": "2012-3-3" }, { "id": "4", "perName": "胡锦涛", "orgId": "1", "money": "10000", "date": "2012-3-3" }, { "id": "5", "perName": "周星池", "orgId": "2", "money": "10000", "date": "2012-3-3" }, { "id": "6", "perName": "黎明", "orgId": "3", "money": "10000", "date": "2012-3-3" }, { "id": "7", "perName": "狼人", "orgId": "3", "money": "10000", "date": "2012-3-3" }, { "id": "8", "perName": "狂魔", "orgId": "3", "money": "10000", "date": "2012-3-3" }, { "id": "9", "perName": "三疯", "orgId": "3", "money": "10000", "date": "2012-3-3" } ]; //分页查询数组 listData.fenyeQuery = function (pageNow, pageSize) { var res = new Array(); //1.按pageSize为5，第1页就是listData[0]-listData[4],第2页就是listData[5]-listData[9] //第3页就是listData[10]-listData[14] var start = (pageNow - 1) * pageSize; var end = listData.length > (pageNow * pageSize) ? (pageNow * pageSize) : listData.length; for (var i = start ; i < end; i++) { res[res.length] = listData[i]; } return res; }; listData.queryByOrId = function (orid) { var arr = new Array(); for (var i = 0; i < listData.length; i++) { if (listData[i].orgId == orid) { arr[arr.length] = listData[i]; } } return arr; }; listData.idNum = listData.length; listData.addRec = function(rec) { listData.idNum++; var newRec = { "id": listData.idNum, "perName": rec.perName, "orgId": rec.orgId, "money": rec.money, "date": rec.date }; listData[listData.length] = newRec; return newRec; }; 。
。
listData.updateRec = function(obj) { for (var i = 0; i < listData.length; i++) { if (listData[i].id = obj.id) { listData[i] = obj; break; } } }; //定义一个全局的变量 ，检测是否取消个性 var isCancelUpdate = false; //定义三个文本input控件 var InputPerName = document.createElement("input"); InputPerName.type = "text"; var InputMoney = document.createElement("input"); InputPerName.type = "text"; var InputDate = document.createElement("input"); InputPerName.type = "text"; var SeleteOrg = document.createElement("select"); listData.delRecById = function (id) { for (var i = 0; i < listData.length; i++) { if (listData[i].id == id) { //删除 /* 1.将从这个ID所在的位置开始，将后面的每一个元素都往前面移动一位 2.最后一个元素重复了，要将其清除 */ for (var j = i; j < listData.length - 1; j++) { listData[j] = listData[j + 1]; } } } listData.length = listData.length - 1; }; //把文本换成input文本框 function txtToInput(tdName, inputName) { tdName.setAttribute("oldValue", tdName.innerHTML);//先保存原来的内容，如果取消，就恢复 inputName.value = tdName.innerHTML; tdName.appendChild(inputName); tdName.removeChild(tdName.firstChild); } function txtToSelect(tdName, selObj) { tdName.appendChild(selObj); tdName.removeChild(tdName.firstChild); selObj.value = tdName.getAttribute("orgId"); } function selectorText(tdName) { var orid = SeleteOrg.value; var orgName = listOrgs.getOrgsById(orid).comName; // tdName.setAttribute("orgId", SeleteOrg.value); tdName.innerHTML = orgName; } //把input变回文本 function InputToTxt(tdName, inputName) { //如果点击的是取消 if (isCancelUpdate) { tdName.innerHTML = tdName.getAttribute("oldValue"); return; } //点击确定修改 tdName.innerHTML = inputName.value; } //把select控件变回文本 function seleToTxt(tdName, selName) { // tdName.appendChild(selName); var orgId = SeleteOrg.value; //删除之前的 tdName.innerHTML = (listOrgs.getOrgsById(orgId)).comName; } //取消修改 function CancelUp(obj) { isCancelUpdate = true;//点击的是取消 doCancel(obj); isCancelUpdate = false; } function doCancel(obj) { var trCur = obj.parentElement.parentElement; var tds = trCur.childNodes; //全部使用原始的td下面的值(保存在Attribute中) 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 = "<a href='#' onclick='DelObj(this)' >删除</a> <a href='#' onclick='UpObj(this)'>修改</a>"; // isCancelUpdate = false; //确定取消成功后就要置trCur为null trCur = null; } var trCur = null; function UpObj(obj) { if (trCur != null) { //说明有行处于编辑状态，要取消其修改 isCancelUpdate = true; //取消那一行的编辑 doCancel(trCur.childNodes[5].firstChild);//trCur.childNodes[5].firstChild,就是上一行的<a 修改> } //得到当前所在的行 trCur = obj.parentElement.parentElement; var tds = trCur.childNodes; //捐赠人input修改 txtToInput(tds[1], InputPerName); //金额 txtToInput(tds[3], InputMoney); //受捐日期 txtToInput(tds[4], InputDate); //下拉选择单位 txtToSelect(tds[2], SeleteOrg); //修改链接变成取消 tds[5].innerHTML = "<a href='#' onclick='doUpObj(this)' >确定</a> <a href='#' onclick='CancelUp(this)'>取消</a>"; } //确定修改 function doUpObj(obj) { isCancelUpdate = false; trCur = obj.parentElement.parentElement; //1.修改数组中对应的记录 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 }; //调用方法来修改ListData中相应的记录 listData.updateRec(rec); //2.修改表格中的记录 InputToTxt(trCur.childNodes[1], InputPerName); seleToTxt(trCur.childNodes[2], SeleteOrg); InputToTxt(trCur.childNodes[3], InputMoney); InputToTxt(trCur.childNodes[4], InputDate); trCur.childNodes[5].innerHTML = "<a href='#' onclick='DelObj(this)' >删除</a> <a href='#' onclick='UpObj(this)'>修改</a>"; 。
//trCur.childNodes[2].setAttribute("orgId", SeleteOrg.value); //确定修改成功后就要置trCur为null trCur = null; } 。
//删除一行数据 。
function DelObj(obj) { //删除数组中对应的数组 //1.要得到选中的行 var curTr = obj.parentElement.parentElement; //2.从第一个列中取到id的值 var delId = curTr.cells[0].innerHTML; // window.alert(delId); //3.根据id删除一条记录(数组中listData) listData.delRecById(delId); //4.删除表格视图中的显示行 curTr.parentElement.removeChild(curTr); } 。
function gel(id) { return document.getElementById(id); } //1.查询单位名称的绑定,selEle是:selet元素节点 function LoadOrgList(selEle) { for (var i = 0; i < listOrgs.length; i++) { var opt = new Option(listOrgs[i].comName, listOrgs[i].id); selEle.options.add(opt); } } //2.绑定表格和绑定表格和listData的方法 。
function LoadDataList() { //for (var i = 0; i < listData.length; i++) { // addRow(listData[i]); //} //分页显示 showPage(); } 。
function 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 = "<a href='#' onclick='DelObj(this)' >删除</a> <a href='#' onclick='UpObj(this)'>修改</a>"; } 。
window.onload = function() { //绑定查询 LoadOrgList(gel("selSearchOrg")); //绑定受捐赠单位 LoadOrgList(gel("selAddOrg")); LoadOrgList(SeleteOrg); //绑定表格和listData LoadDataList(); 。
//给新增按钮绑定一个事件 gel("btnAdd").onclick = function() { if ((!(gel("txtName").value)) || (!(gel("txtMoney").value) || (!(gel("txtDate").value)))) { alert("输入不能为空"); return; } //1.得到输入的内容，打包成一个对象(按照listData的格式) var arr = { "perName": gel("txtName").value, "orgId": gel("selAddOrg").value, "money": gel("txtMoney").value, "date": gel("txtDate").value }; //2.添加到listData数组中 var res = listData.addRec(arr); //3.显示在表格中 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; trnew.insertCell(-1).innerHTML = res.money; trnew.insertCell(-1).innerHTML = res.date; trnew.insertCell(-1).innerHTML = "<a href='#' onclick='DelObj(this)' >删除</a> <a href='#' onclick='UpObj(this)'>修改</a>"; }; //给查询按钮绑定事件 gel("btnSearch").onclick = function () { if (gel("selSearchOrg").value == -1) { return; } //1.获取要查询的受捐赠单位的orgid var orgId = gel("selSearchOrg").value; //2.在ListData数组中定义一个根据orgid查询的方法,并在这里调用 var arrRes = listData.queryByOrId(orgId); //3.将旧的表格数据移除显示,一定要从下到上清空显示 var trs = gel("tbList").rows; for (var j = trs.length-1; j>0; j--) { gel("tbList").deleteRow(j); } //4.显示新的数据arrRes for (var i = 0; i < arrRes.length; i++) { addRow(arrRes[i]); } }; 。
//给上一页绑定事件 gel("btnprePage").onclick = function() { if (pageNow > 1) { pageNow--; showPage(); } else { alert("已经是第一页!") } }; //给下一页绑定事件 gel("btnnextPage").onclick = function () { if(pageNow<listData.length/pageSize) { pageNow++; showPage(); }else { alert("已经是最后一页!"); } }; }; var pageNow = 1; var pageSize = 5; function showPage() { var trs = gel("tbList").rows; for (var j = trs.length - 1; j > 0; j--) { gel("tbList").deleteRow(j); } //1.根据pageNow和pageSize返回一个数组 var res = listData.fenyeQuery(pageNow, pageSize); for (var i = 0; i < res.length; i++) { addRow(res[i]); } } </script> </head> <body> <div id="container"> <h1>捐赠管理</h1> <div class="search"> 受捐单位 <select id="selSearchOrg"> <option value="-1">--请选择--</option> </select> <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> </div> <div class="search"> 捐赠人：<input type="text" id="txtName" class="inputShort" size="8" /> 受捐单位： <select id="selAddOrg"> </select> 金额：<input type="text" id="txtMoney" class="inputShort" size="8" /> 受捐日期：<input type="text" id="txtDate" class="inputShort" size="10" /> <input type="button" id="btnAdd" value="新增" class="btn" /> </div> <table id="tbList" class="tbList" cellspacing="0" cellpadding="0"> <tr class="th"> <td>序号</td> <td>捐赠人</td> <td>受捐单位</td> <td>金额</td> <td>受捐日期</td> <td>操作</td> </tr> </table> </div> </body> </html> 。
。
css.css如下:
。
希望本文所述对大家的javascript程序设计有所帮助.
最后此篇关于js实现的捐赠管理完整实例的文章就讲到这里了,如果你想了解更多关于js实现的捐赠管理完整实例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
26
4
0
具体详细介绍请看下文： 在使用文件进行交互数据的应用来说，使用FTP服务器是一个很好的选择。本文使用Apache Jakarta Commons Net（commons-net-3.3.jar）
我在日志文件中收到这些警告: WARN 2013-01-15 00:08:15,550 org.eclipse.jetty.http.HttpParser- HttpParser Full for
我在使用特定网页时遇到问题。当我按下链接时，我收到应用程序错误(不是 http 错误等，而是应用程序级别错误)。 但是我打开了开发人员工具和网络控制台，我看到没有请求发送到服务器。 所以我双击并选择查
我没有组装经验，但这是我一直在做的。如果在通过程序集中的指针传递参数和调用函数时缺少任何基本方面，我希望输入。 例如，我想知道是否应该还原ecx，edx，esi，edi，。我读到它们是通用寄存器，但我
我没有组装经验，但这是我一直在做的。如果在通过程序集中的指针传递参数和调用函数时缺少任何基本方面，我希望输入。 例如，我想知道是否应该还原ecx，edx，esi，edi，。我读到它们是通用寄存器，但我
我正在尝试创建完整 uiscrollview 的快照，所有内容大小，我已经搜索了很多，并且我在 SO 上找到了一些东西，如下所示: Getting a screenshot of a UIScroll
我想复制一个包含以下结构的Vector，对我来说重要的是在修改复制的 vector 时保持原始Vector完整: public class objet_poid_n { public int
给定一个示例字符串 s = '嗨，我的名字是 Humpty-Dumpty，来自“爱丽丝，爱丽丝镜中奇遇记”'，我想将其分成以下 block : # To Do: something like {l =
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以
我正在尝试创建一个正则表达式来查找文本中的 Linux 文件路径，但是正则表达式对我来说非常陌生。我有下面的代码片段，它将识别下面文件结构的开头。 .*(/bin/|/home/).* 完成正则表达式
我正在寻找远程托管的 JPG 的尺寸、宽度和高度。我已经了解了如何通过下载完整图像来执行此操作。 但是，如果我可以通过仅下载足以获取此信息的方式来做到这一点，那将是理想的。 典型的图像大小为 200K
有没有办法让下面的代码: import traceback def log(message): print "%s: %s" %(traceback.extract_stack()[0:-1]
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 3 年前。 Improve this qu
git show 显示了修订版中所做的所有更改。但是，它会打印出所有更改——而不仅仅是文件名。 git show --stat 只显示文件名，但它把它们截断了!有没有办法获得已更改文件名的完整列表？
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。 想要改善这个问题吗？更新问题，以便将其作为on-topi
当我在模板中调用我的模型 get_absolute_url 方法时，我想要一个绝对/完整的 url。在我的入门模型中，我有以下内容: def get_absolute_url(self): r
我正在使用 jQuery 1.5.1 这是我的代码: $('.cellcontent').animate({ left: '-=190'}, { easing: alert('start
我正在使用下面的方法删除条形图并使用新数据更新条形图，但这样做时出现了一个小故障/完整的图表消失 1 秒，直到加载新数据。但是是否可以通过仅增加/减少柱形而不实际消失图表来实现相同的目的。 d3.se
基于 this question 中的讨论，任何人都可以提供代码或代码链接，显示 NumericLiteralX 模块的完整实现(例如 this one )？我对 NumericLiteralX 模块
我的目标是检索网站的 html，并将其转换为可读的String。我下面的代码可以工作，但我遇到了一个技术问题:当我尝试检索 http://time.gov/HTML5 的 html 时，我在 andr
我是一名优秀的程序员,十分优秀！