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

2024-12-01 13:30:27

本文实例讲述了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 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程序设计有所帮助。

js实现文章文字大小字号功能完整实例

本文实例讲述了js实现文章文字大小字号功能的方法.分享给大家供大家参考.具体分析如下: 文字大中小是很多网站供用户阅读方便的一个功能,本文实例介绍的文字大中小字号功能可以在用户选择之后打开只要在同网站打开另一篇文章都会根据用户习惯来显示字体大小. 大家一定在某些大型网站看到过文章标题下三个按钮 "大"."中"."小",用来照顾不同人的阅读习惯.这里我就要介绍这种方法,而且比它们的还支持自动保存哦~只要选择一次,下次阅读自动调整到喜欢的字号. JS
js实现网页标题栏闪烁提示效果实例分析

本文实例讲述了js实现网页标题栏闪烁提示效果的方法.分享给大家供大家参考.具体分析如下: 网页标题栏闪烁效果我们在一些聊天工具会常看到,像现在流量的聊天室,下面我们就来给大家总结一款实现网页标题栏闪烁提示代码,感兴趣可参考一下. 公司的项目中用到了这个新消息提示的效果,主要用于提示用户有新消息.具体实现代码如下: 复制代码代码如下: var newMessageRemind={ _step: 0, _title: document.title, _timer: null, //显示新消息提示
JS实现倒计时和文字滚动的效果实例

本文实例讲述了JS实现倒计时和文字滚动效果的方法.分享给大家供大家参考.具体实现方法如下: 说明:一般我们在一些淘宝类店铺中会看到一些像搞竞拍之类的活动,从中我们时而会发现一些倒计时的效果,在一些年会等场合我们也会发现一些抽奖活动,从中我们也可以看到一些随即滚动的效果.这里给大家分享一种实现倒计时和文字滚动的方法,希望可以对大家有所帮助.这里主要是通过js实现的. 一.倒计时效果的实现前台部分的完整代码如下: 复制代码代码如下: <html xmlns="http://www.w3.o
js实现ArrayList功能附实例代码

1.ArrayList方法摘要构造方法摘要 ArrayList() 构造一个初始容量为 10 的空列表. ArrayList(Collection<? extends E> c) 构造一个包含指定 collection 的元素的列表,这些元素是按照该 collection 的迭代器返回它们的顺序排列的. ArrayList(int initialCapacity) 构造一个具有指定初始容量的空列表. 方法摘要 boolean add(E e) 将指定的元素添加到此列表的尾部. void ad
Nodejs实现的一个静态服务器实例

参考cnodejs.org上面的静态服务器例子,写了下面的一个nodejs静态服务器例子,里面包含cache,压缩,贴代码如下: 复制代码代码如下: /** * 静态文件服务器测试例子 * User: xuwm * Date: 13-5-17 * Time: 上午8:38 * To change this template use File | Settings | File Templates. */ var port=3333; var http = require("http
js与jQuery实现的兼容多浏览器Ajax请求实例

ajax我们经常会用到的,但网上找到的大部份ajax兼容性都不强,下面自己改了一个不错的兼容性很强的ajax函数,同时后面介绍的jquery ajax 兼容性也很强. 一.纯js实现的Ajax实例: 复制代码代码如下: var ajax = function() {}; ajax.prototype = { request: function(method, url, callback, postVars) { var xhr = this.createXhrObjec
php+js实现异步图片上传实例分享

upload.php 复制代码代码如下: <?phpif(isset($_FILES["myfile"])){$ret = array();$uploadDir = 'images'.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;$dir = dirname(__FILE__).DIRECTORY_SEPARATOR.$uploadDir;file_exists($dir) || (mkdir($di
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&q
JS实现的二叉树算法完整实例

本文实例讲述了JS实现的二叉树算法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <head> <title>20130328BinaryTree</title> <metahttp-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <html> <body> <
JS实现的系统调色板完整实例

本文实例讲述了JS实现的系统调色板.分享给大家供大家参考,具体如下: 运行效果图如下: 整体页面代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>DW调色板</title> <script type="text/javascript" langu
JS实现的打字机效果完整实例

本文实例讲述了JS实现的打字机效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the
js简单网速测试方法完整实例

本文实例讲述了js简单网速测试方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <m
Angular.JS读取数据库数据调用完整实例

本文实例讲述了Angular.JS读取数据库数据调用.分享给大家供大家参考,具体如下: 以下是实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <style&
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】

本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#piclist { width: 600p
js实现会跳动的日历效果(完整实例)

一.简介编写一个会动的日历,日历上面有年月日,周几,时分秒,效果如下: 年月日,周几,时分秒都会随着系统时间的走动而改变二.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
JS实现单击输入框弹出选择框效果完整实例

本文实例讲述了JS实现单击输入框弹出选择框效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999
JS实现的RGB网页颜色在线取色器完整实例

本文实例讲述了JS实现的RGB网页颜色在线取色器.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <meta name="description" content="在线取色器"> <me

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

相关推荐

随机推荐