js实现的捐赠管理完整实例


Posted in Javascript onJanuary 20, 2015

本文实例讲述了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如下:

* {  

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

Javascript 相关文章推荐
js 实现复制到粘贴板的功能代码
May 13 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 #Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 #Javascript
DOM基础教程之使用DOM + Css
Jan 20 #Javascript
jquery+ajax实现跨域请求的方法
Jan 20 #Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 #Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 #Javascript
用队列模拟jquery的动画算法实例
Jan 20 #Javascript
You might like
PHP环境中Memcache的安装和使用
2015/11/05 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
javascript this用法小结
2008/12/19 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
javascript的BOM
2016/05/03 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
初步认识Python中的列表与位运算符
2015/10/12 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
python之pandas用法大全
2018/03/13 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
python实现趣味图片字符化
2019/04/30 Python
详解Python sys.argv使用方法
2019/05/10 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
Python 内存管理机制全面分析
2021/01/16 Python
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
应届毕业生求职信范文分享
2013/12/26 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
小学课外活动总结
2014/07/09 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
中班上学期个人总结
2015/02/12 职场文书
个人求职信格式范文
2015/03/20 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS