萬盛學電腦網 >> 腳本專題 >> javascript >> js實現的捐贈管理完整實例
js實現的捐贈管理完整實例
這篇文章主要介紹了js實現的捐贈管理完整實例,包括了html頁面、js腳本及css樣式的完整實現代碼,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了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
