使用html，JavaScript，ajax写一个小型实例

//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>  <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>  <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>  <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>  <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写一个小型实例的更多相关文章

JavaScript 自己写一个 replaceAll() 函数
JavaScript 的 replace() 方法可以在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 但是,只输入字符串的话,仅替换第一个字符,当然也可以用正则表达式来进行 ...
用php和ajax写一个省市区的三级联动，实现地区的下拉选择
要实现这个页面的三级联动,我们需要建立三个php文件,第一个php文件我们导入jQuery文件,里面嵌入JavaScript:第二个php文件我们做一个php的处理页面,里面引入我们封装好的数据库类文 ...
javascript如何写一个for循环
一个非常简单的for循环,也有不少的学问.假如,我们的目标是要遍历一个dom结点的所有孩子结点,然后打印结点的内容. 在javascript下,我刚学习的时间,我会这样写. for(var i = 0 ...
初学Javascript，写一个简易的登陆框
 <!DOCTYPE html> <html> <head> <meta charset = "utf-8&q ...
javascript数据结构——写一个二叉搜索树
二叉搜索树就是左侧子节点值比根节点值小,右侧子节点值比根节点值大的二叉树. 照着书敲了一遍. function BinarySearchTree(){ var Node = function(key) ...
初学javascript，写一个简单的阶乘算法当作练习
代码如下: <script> var a = prompt("请输入值"); function mul(a){ if(a==1){ return 1; } return ...
ajax 写登录
AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ajax的优点: 1.最大的一点是页面无刷新,用户的体验非常好. 2.使用 ...
《用Java写一个通用的服务器程序》01 综述
最近一两年用C++写了好几个基于TCP通信类型程序,都是写一个小型的服务器,监听请求,解析自定义的协议,处理请求,返回结果.每次写新程序时都把老代码拿来,修改一下协议解析部分和业务处理部分,然后就一个 ...
写一个ajax程序就是如此简单
写一个ajax程序就是如此简单 ajax介绍: 1:AJAX全称为Asynchronous JavaScript and XML(异步JavaScript和XML),指一种创建交互式网页应用的网页开发 ...

随机推荐

MVC 笔记（二）
HttpUtility.HtmlEncode来预处理用户输入,这能阻止用户向视图中用链接注入js代码或html标记 .[Required]:非空验证 .[StringLength(**)]:设置字符的 ...
Go语言中怎样判断数据类型_不懂的木匠_新浪博客
要判断数据类型,可以用Go的空接口: 建一个函数t 设置参数i 的类型为空接口,空接口可以接受任何数据类型 func t(i interface{}) { //函数t有一个参数i switch i ...
php 汉字排序
<?phpheader("content-type:text/html;charset=utf-8");$array=array('重庆市','上海市','安徽省','吉林省 ...
FreeImage裁剪示例
//截图 int cropImage(const char* file, int left, int top, int right, int bottom, BYTE* &dstData, D ...
oracle DBLink
现有两个oracle DB为A和B,为了能在A数据库中对B数据库进行操作,我们需要在A数据库中建立对B的DBLink. 在创建DBLink之前,我们首先去检查下DB A的global_names ...
深刻理解Oracle数据库的启动和关闭 .
Oracle数据库提供了几种不同的数据库启动和关闭方式,本文将详细介绍这些启动和关闭方式之间的区别以及它们各自不同的功能. 一.启动和关闭Oracle数据库对于大多数Oracle DBA来说,启动和 ...
wampserver php 设置时间
php.ini 查找date.timezone = Europe/Paris 修改成亚洲地区 date.timezone = Asia/Shanghai
Android性能优化建议
1.减少View树的高度(多层嵌套) 2.使用<include>重用layout 3.使用<ViewStub>实现View的延迟加载作用范围:当这个布局在初始化加载时候,不需 ...
vmware设置centos虚拟机nat联网（转）
今天在vmware虚拟主机中安装hearbeat,为了使用最新的版本,选用编译安装了.在编译过程中,需要连接被墙的网站下载文件,那只能用vpn,但我使用的是桥接方式联网,使用不了真实主机的vpn,于是 ...
python运维开发(十四)----HTML基本操作
内容目录: HTML概述 head标签 body中常用标签 css选择器 css常用属性 HTML HTML概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言) ...

使用html，JavaScript，ajax写一个小型实例

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

随机推荐

热门专题