//1.创建受捐单位数组
var arrOrgData = [
    { "Id": 1, "OrgName": "红十字会" },
    { "Id": 2, "OrgName": "壹基金" },
    { "Id": 3, "OrgName": "中华慈善总会" },
    { "Id": 4, "OrgName": "中国扶贫基金会" }
];
//1-1.根据受捐单位id,返回受捐单位元素,动态绑定(定义)方法
arrOrgData.getOrgById = function (id) {
    for (var i = 0; i < this.length; i++) {
        if (this[i].Id == id) {
            return this[i];
        };
    };
};
//2.详细捐赠信息数组
var arrDetailData = [
    { "Id": 1, "Name": "成龙", "OrgId": 1, "Money": "1000", "Time": "2013 - 07 - 08" },
    { "Id": 2, "Name": "肥龙", "OrgId": 2, "Money": "2000", "Time": "2013 - 07 - 08" },
    { "Id": 3, "Name": "瘦龙", "OrgId": 3, "Money": "3000", "Time": "2013 - 07 - 08" },
    { "Id": 4, "Name": "傻龙", "OrgId": 4, "Money": "4000", "Time": "2013 - 07 - 08" }
];
//2.1.根据id删除数组元素
arrDetailData.deleteById = function (id) {
    for (var i = 0; i < this.length; i++) {
        if (this[i].Id == id) {
            //元素前移
            for (var j = i; j < this.length - 1; j++) {
                this[j] = this[j + 1];
            };
            //数组长度--
            this.length--;
            break;
        };
    };
};
//2-2.更新数据,model-修改后的对象
arrDetailData.update = function (model) {
    for (var i = 0; i < this.length; i++) {
        if (this[i].Id == model.Id) {
            this[i] = model;
            break;
        };
    };
};
//2-3.新增数据,并返回新增的元素
var modelId=arrDetailData.length;//定义变量,存储数组元素的Id
arrDetailData.addModel = function (model) {
    modelId++;//每次添加序号++
    model.Id = modelId;//设置添加对象的Id
    this[this.length] = model;//数组元素++,在length
    return model;
};
//2-4.根据捐赠单位Id返回数组
arrDetailData.getSearchData = function (id) {
    if(id==-1){//id为-1返回所有数据
        return this;
    };
    //定义存储查询数据的数组
    var arrSearch = new Array();
    for (var i = 0; i < this.length; i++) {
        if(this[i].OrgId==id){//判断OrgId是否符合条件
            arrSearch[arrSearch.length]=this[i];
        };
    };
    return arrSearch;
};
//2-5.返回一页数据
arrDetailData.pageIndex = 1;//页码
arrDetailData.pageCount = 5;//每页记录条数
arrDetailData.pages=0;//总页数
//返回第pageIndex页数据
arrDetailData.getPageData = function () {
    var pageData = new Array();//定义数组存储一页数据
    for (var i = (this.pageIndex - 1) * this.pageCount; i < this.pageIndex * this.pageCount; i++) {//获取第pageIndex页数据
        //alert(this[i]);
        if (this[i]) {//判断this[i]是否undefined,过滤掉
            pageData[pageData.length] = this[i];
        };
    }
    return pageData;
};
//3.加载受捐单位信息,element-传入select对象
function loadOrgData(element) {
    for (var i = 0; i < arrOrgData.length; i++) {
        var opt = new Option(arrOrgData[i].OrgName, arrDetailData[i].Id);
        element.options.add(opt);
    };
};
//4.加载表数据(详细信息)
function loadDetailData() {
    for (var i = 0; i < arrDetailData.length; i++) {
        addTr(arrDetailData[i]);
    }
};
//4-1.加载表数据,arr数组数据
function loadDataToTb(arr) {
    for (var i = 0; i < arr.length; i++) {
        addTr(arr[i]);
    };
};
//4-1.插入一行,model-数组元素
function addTr(model) {
    var tb = getElement("tbList");//获得表对象
    var tr = tb.insertRow(-1);//插入一行
    tr.insertCell(-1).innerHTML = model.Id;//插入序号列
    tr.insertCell(-1).innerHTML = model.Name;//插入名称列
    var td = tr.insertCell(-1);//插入OrgId列
    td.setAttribute("OrgId", model.OrgId);//保存OrgId到td的OrgId属性(自定义)
    td.innerHTML = arrOrgData.getOrgById(model.OrgId).OrgName;//设置捐赠单位名称
    tr.insertCell(-1).innerHTML = model.Money;//插入金额列
    tr.insertCell(-1).innerHTML = model.Time;//插入捐赠时间列
    tr.insertCell(-1).innerHTML = "<a href='#' onclick='setUpdateState(this)'>修改</a>&nbsp;&nbsp;<a href='#' onclick='deleteRow(this)'>删除</a>";//操作列
};
//5.根据标签id获得标签对象
function getElement(id) {
    return document.getElementById(id);
};
//6.删除行,element-当前点击de
function deleteRow(element) {
    if (GlobalUpdateTr != null) {//判断当前是否修改状态
        rollBack(GlobalUpdateTr);
    };
    if (!confirm("确定删除吗?")) {//确认是否要移除
        return;
    };
    var delTr = element.parentNode.parentNode;//获取删除行
    delTr.parentNode.removeChild(delTr);//移除行
    arrDetailData.deleteById(delTr.childNodes[0].innerHTML);//删除对应的数组元素
};
//7.修改行
//7-1.定义全局变量,三个文本框一个下拉列表,一个存储修改行的变量GlobalUpdateTr,标记修改状态
var inputPersonName = document.createElement("input");//捐赠人名称
inputPersonName.type = "text";
var inputMoney = document.createElement("input");//捐赠金额
inputMoney.type = "text";
var inputTime = document.createElement("input");//捐赠时间
inputTime.type = "text";
var selectOrg = document.createElement("select");//受捐单位下拉列表
var GlobalUpdateTr = null;//存储修改行,标记是否修改状态
//7.2.设置当前行,为修改状态,obj-当前点击对象
function setUpdateState(element) {
    if (GlobalUpdateTr != null) {//判断是否已经在修改状态
        rollBack(GlobalUpdateTr);//还原
    };
    GlobalUpdateTr = element.parentNode.parentNode;//获得当前修改行
    txtToInput(GlobalUpdateTr.childNodes[1], inputPersonName);
    txtToInput(GlobalUpdateTr.childNodes[3], inputMoney);
    txtToInput(GlobalUpdateTr.childNodes[4], inputTime);
    txtToSelect(GlobalUpdateTr.childNodes[2], selectOrg);
    GlobalUpdateTr.childNodes[5].innerHTML = "<a href='#' onclick='update(this)'>确定</a>&nbsp;&nbsp;<a href='#' onclick='exitUpdateState(this)'>取消</a>";//设置操作列
};
//7-2-1.当前行设置为修改状态(文本设为文本框)(td:列,element:文本框)
function txtToInput(td,element) {
    element.value = td.innerHTML;//设置obj的值
    td.setAttribute("oldValue",td.innerHTML);//保存td的文本值,取消修改时要取的值
    td.appendChild(element);//往列td添加obj
    if (td.childNodes[1]) {//判断是否有文本节点
        td.removeChild(td.childNodes[0]);//移除td的文本节点
    };
};
//7-2-2.当前行设置为修改状态(文本设为下拉列)(td:列,element:下拉列)
function txtToSelect(td, element) {
    td.appendChild(element);
    td.removeChild(td.childNodes[0]);
    element.value = td.getAttribute("OrgId");
};
//7-3.取消修改,恢复界面,退出修改操作状态,element-当前点击对象
function exitUpdateState(element) {
    var cancelTr = element.parentNode.parentNode;//取得当前行
    rollBack(cancelTr);
    //退出修改状态
    GlobalUpdateTr = null;
};
//还原,obj-当前修改行/之前的修改行
function rollBack(element) {
    element.childNodes[1].innerHTML = element.childNodes[1].getAttribute("oldValue");//恢复原来的文本值(名称)
    element.childNodes[3].innerHTML = element.childNodes[3].getAttribute("oldValue");//恢复原来的文本值(金额)
    element.childNodes[4].innerHTML = element.childNodes[4].getAttribute("oldValue");//恢复原来的文本值(日期)
    element.childNodes[2].removeChild(selectOrg);//移除下拉列
    var orgId = element.childNodes[2].getAttribute("OrgId");//取得捐赠单位id
    element.childNodes[2].innerHTML = arrOrgData.getOrgById(orgId).OrgName;//恢复原来的文本值(捐赠单位)
    element.childNodes[5].innerHTML = "<a href='#' onclick='setUpdateState(this)'>修改</a>&nbsp;&nbsp;<a href='#' onclick='deleteRow(this)'>删除</a>";//恢复操作列
};
//7-4.确定修改,更新界面,更新数据,修改完毕退出修改状态,element-当前点击对象
function update(element) {
    var updateTr = element.parentNode.parentNode;//取得当前行
    //更新界面
    updateTr.childNodes[1].innerHTML = inputPersonName.value;
    updateTr.childNodes[3].innerHTML = inputMoney.value;
    updateTr.childNodes[4].innerHTML = inputTime.value;
    updateTr.childNodes[2].removeChild(selectOrg);
    updateTr.childNodes[2].innerHTML = arrOrgData.getOrgById(selectOrg.value).OrgName;
    updateTr.childNodes[2].setAttribute("OrgId", selectOrg.value);//更新OrgId
    updateTr.childNodes[5].innerHTML = "<a href='#' onclick='setUpdateState(this)'>修改</a>&nbsp;&nbsp;<a href='#' onclick='deleteRow(this)'>删除</a>";//恢复操作列
    //更新数据
    //下拉列表的value值就是下拉列表当前选项的value值
    var model = { "Id": updateTr.childNodes[0].innerHTML, "Name": inputPersonName.value, "OrgId": selectOrg.value, "Money": inputMoney.value, "Time": inputTime.value };//创建与当前行数据对应的对象
    arrDetailData.update(model);//更新数组
    //退出修改状态
    GlobalUpdateTr = null;
};
//-------窗口加载完毕触发--------//
window.onload = function () {
    //1.加载arrOrgData(to下拉列)
    loadOrgData(getElement("selSearchOrg"));
    loadOrgData(getElement("selAddOrg"));
    loadOrgData(selectOrg);
    //2.加载arrDetailData(to表)
    loadDetailData();
    //3.新增
    getElement("btnAdd").onclick = function () {
        var model = {"Name": getElement("txtName").value, "OrgId": getElement("selAddOrg").value, "Money": getElement("txtMoney").value, "Time": getElement("txtDate").value };//创建一个新数组元素对象
        model = arrDetailData.addModel(model);//返回新增的元素
        addTr(model);//插入新行到表显示
    };
    //4.查询(先删除当前界面所有行,再添加)
    getElement("btnSearch").onclick = function () {
        var tbList = getElement("tbList");//获得表
        for (var i = tbList.rows.length - 1; i >= 1; i--) {//遍历删除表的行,从末端开始
            tbList.deleteRow(i);//删除一行
        }
        var searchId = getElement("selSearchOrg").value;//要查询的捐赠单位id
        var arrSearchData = arrDetailData.getSearchData(searchId);//得到查询数据
        loadDataToTb(arrSearchData);//(加载)显示查询数据
    };
    //5.分页(先删除当前界面所有行,再添加)
    //5-1.下一页
    getElement("btnnextPage").onclick = function () {
        if (arrDetailData.length == 0) {
            alert("没有数据");
        };
        //获取总页数
        arrDetailData.pages = arrDetailData.length % arrDetailData.pageCount != 0 ? (arrDetailData.length - arrDetailData.length % arrDetailData.pageCount) / arrDetailData.pageCount + 1 : arrDetailData.length / arrDetailData.pageCount;
        if (arrDetailData.pageIndex == arrDetailData.pages) {//判断是否最后一页
            alert("最后一页啦");
            return;//返回
        };
        var tbList = getElement("tbList");//获得表对象
        for (var  i= tbList.rows.length-1;i>=1; i--) {//删除表所有行
            tbList.deleteRow(i);
        }
        arrDetailData.pageIndex++;//页码++,取得下一页
        var arrPage = arrDetailData.getPageData();//获得一页数据
        loadDataToTb(arrPage);//加载显示到表
    };
    //5-2.上一页
    getElement("btnprePage").onclick = function () {
        if (arrDetailData.length == 0) {
            alert("没有数据"

 

        };
        //获取总页数
        arrDetailData.pages = arrDetailData.length % arrDetailData.pageCount != 0 ? (arrDetailData.length - arrDetailData.length % arrDetailData.pageCount) / arrDetailData.pageCount + 1 : arrDetailData.length / arrDetailData.pageCount;
        if(arrDetailData.pageIndex==1){//判断是否第一页
            alert("这个第一页");
            return;
        };
        var tbList = getElement("tbList");//获得表对象
        for (var i = tbList.rows.length - 1; i >= 1; i--) {//删除表所有行
            tbList.deleteRow(i);
        }
        arrDetailData.pageIndex--;//页码--,取得上一页
        var arrPage = arrDetailData.getPageData();//获得一页数据
        loadDataToTb(arrPage);//加载显示到表
    };
};
//这是显示的效果

使用html,JavaScript,ajax写一个小型实例的更多相关文章

  1. JavaScript 自己写一个 replaceAll() 函数

    JavaScript 的  replace()  方法可以在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 但是,只输入字符串的话,仅替换第一个字符,当然也可以用正则表达式来进行 ...

  2. 用php和ajax写一个省市区的三级联动,实现地区的下拉选择

    要实现这个页面的三级联动,我们需要建立三个php文件,第一个php文件我们导入jQuery文件,里面嵌入JavaScript:第二个php文件我们做一个php的处理页面,里面引入我们封装好的数据库类文 ...

  3. javascript如何写一个for循环

    一个非常简单的for循环,也有不少的学问.假如,我们的目标是要遍历一个dom结点的所有孩子结点,然后打印结点的内容. 在javascript下,我刚学习的时间,我会这样写. for(var i = 0 ...

  4. 初学Javascript,写一个简易的登陆框

    <!--下面是源代码--> <!DOCTYPE html> <html> <head> <meta charset = "utf-8&q ...

  5. javascript数据结构——写一个二叉搜索树

    二叉搜索树就是左侧子节点值比根节点值小,右侧子节点值比根节点值大的二叉树. 照着书敲了一遍. function BinarySearchTree(){ var Node = function(key) ...

  6. 初学javascript,写一个简单的阶乘算法当作练习

    代码如下: <script> var a = prompt("请输入值"); function mul(a){ if(a==1){ return 1; } return ...

  7. ajax 写登录

    AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ajax的优点: 1.最大的一点是页面无刷新,用户的体验非常好. 2.使用 ...

  8. 《用Java写一个通用的服务器程序》01 综述

    最近一两年用C++写了好几个基于TCP通信类型程序,都是写一个小型的服务器,监听请求,解析自定义的协议,处理请求,返回结果.每次写新程序时都把老代码拿来,修改一下协议解析部分和业务处理部分,然后就一个 ...

  9. 写一个ajax程序就是如此简单

    写一个ajax程序就是如此简单 ajax介绍: 1:AJAX全称为Asynchronous JavaScript and XML(异步JavaScript和XML),指一种创建交互式网页应用的网页开发 ...

随机推荐

  1. UMl概述(转)

    1. UML的组成 UML由视图(View).图(Diagram).模型元素(Model Element)和通用机制(General Mechanism)等几个部分组成. a) 视图(View): 是 ...

  2. BlazeDS简介(转自openkk的日志)

    BlazeDS 是一个基于服务器的 Java 远程控制 (remoting) 和 Web 消息传递 (messaging) 技术,以LGPL(Lesser GNU Public License)公共许 ...

  3. [转载]浅析Windows安全相关的一些概念

    Session 我们平常所说的Session是指一次终端登录, 这里的终端登录是指要有自己的显示器和鼠标键盘等, 它包括本地登录和远程登录.在XP时代每次终端登录才会创建一个Session,但是在Vi ...

  4. AngularJS中serivce,factory,provider的区别

    一.service引导 刚开始学习Angular的时候,经常被误解和被初学者问到的组件是 service(), factory(), 和 provide()这几个方法之间的差别.This is whe ...

  5. Django学习(一) Django安装配置

    上一节介绍了如何搭建Python的开发环境,这次介绍一下如何搭建Django的开发环境. 第一.下载Django Django跟Python的版本对应 Django version Python ve ...

  6. 计算球体积,hdu-2002

    计算球体积 Problem Description 根据输入的半径值,计算球的体积.   Input 输入数据有多组,每组占一行,每行包括一个实数,表示球的半径.   Output 输出对应的球的体积 ...

  7. Android平台对H264视频硬解码

    本文讲述如何使用Android标准的API (MediaCodec)实现H264的硬件解码. 原本我们是用JNI调用平台提供的硬件解码接口得到YUV帧,再放入opengl脚本里处理渲染的.可是换了新平 ...

  8. Oracle EBS-SQL (INV-7):检查接收中记录数.sql

    select      msi.segment1           物料编码,       msi.description          物料描述,      sum(rs.quantity)  ...

  9. QT VS配置UNICODE问题

    默认情况下,使用VSQT插件 导入.pro后,会自动在项目文件里面预定义好宏UNICODE,可以把该宏去掉,以免造成其他程序,使用多字节的代码出错 去除的两个方法 1.打开Propject->P ...

  10. inno setup 跳过(Welcome)欢迎界面

    原文 http://zwkufo.blog.163.com/blog/static/25882512010816049549/ 在InnoSetup中,我们很容易用 function ShouldSk ...