index.html页面如下：

代码如下:






//受捐单位数组
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 = "删除 修改";
// 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,就是上一行的
}

//得到当前所在的行
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 = "确定 取消";
}

//确定修改
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 = "删除 修改";

//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 = "删除 修改";
}

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 = "删除 修改";
};

//给查询按钮绑定事件
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 {
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]);
}
}

捐赠管理

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