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 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
webpack打包js的方法
Mar 12 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
微信小程序左滑删除实现代码实例
Sep 16 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
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
JavaScript函数详解
2014/11/17 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
js仿360开机效果
2019/12/26 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
Python类装饰器实现方法详解
2018/12/21 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
浅析python内置模块collections
2019/11/15 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
比驿:全球酒店比价网
2018/06/20 全球购物
求职信范文怎么写
2014/01/29 职场文书
学习标兵获奖感言
2014/02/20 职场文书
人力资源总监工作说明
2014/03/03 职场文书
家长通知书教师评语
2014/04/17 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
农村门前三包责任书
2014/07/25 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技