JavaScript實(shí)現(xiàn)增刪改查功能，具體代碼如下：
//1.創(chuàng)建受捐單位數(shù)組
var arrOrgData = [
{ "Id": 1, "OrgName": "紅十字會(huì)" },
{ "Id": 2, "OrgName": "壹基金" },
{ "Id": 3, "OrgName": "中華慈善總會(huì)" },
{ "Id": 4, "OrgName": "中國(guó)扶貧基金會(huì)" }
];
//1-1.根據(jù)受捐單位id，返回受捐單位元素,動(dòng)態(tài)綁定(定義)方法
arrOrgData.getOrgById = function (id) {
for (var i = 0; i < this.length; i++) {
if (this[i].Id == id) {
return this[i];
};
};
};
//2.詳細(xì)捐贈(zèng)信息數(shù)組
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.根據(jù)id刪除數(shù)組元素
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];
};
//數(shù)組長(zhǎng)度--
this.length--;
break;
};
};
};
//2-2.更新數(shù)據(jù)，model-修改后的對(duì)象
arrDetailData.update = function (model) {
for (var i = 0; i < this.length; i++) {
if (this[i].Id == model.Id) {
this[i] = model;
break;
};
};
};
//2-3.新增數(shù)據(jù)，并返回新增的元素
var modelId=arrDetailData.length;//定義變量，存儲(chǔ)數(shù)組元素的Id
arrDetailData.addModel = function (model) {
modelId++;//每次添加序號(hào)++
model.Id = modelId;//設(shè)置添加對(duì)象的Id
this[this.length] = model;//數(shù)組元素++，在length
return model;
};
//2-4.根據(jù)捐贈(zèng)單位Id返回?cái)?shù)組
arrDetailData.getSearchData = function (id) {
if(id==-1){//id為-1返回所有數(shù)據(jù)
return this;
};
//定義存儲(chǔ)查詢數(shù)據(jù)的數(shù)組
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.返回一頁(yè)數(shù)據(jù)
arrDetailData.pageIndex = 1;//頁(yè)碼
arrDetailData.pageCount = 5;//每頁(yè)記錄條數(shù)
arrDetailData.pages=0;//總頁(yè)數(shù)
//返回第pageIndex頁(yè)數(shù)據(jù)
arrDetailData.getPageData = function () {
var pageData = new Array();//定義數(shù)組存儲(chǔ)一頁(yè)數(shù)據(jù)
for (var i = (this.pageIndex - 1) * this.pageCount; i < this.pageIndex * this.pageCount; i++) {//獲取第pageIndex頁(yè)數(shù)據(jù)
//alert(this[i]);
if (this[i]) {//判斷this[i]是否undefined,過(guò)濾掉
pageData[pageData.length] = this[i];
};
}
return pageData;
};
//3.加載受捐單位信息,element-傳入select對(duì)象
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.加載表數(shù)據(jù)（詳細(xì)信息）
function loadDetailData() {
for (var i = 0; i < arrDetailData.length; i++) {
addTr(arrDetailData[i]);
}
};
//4-1.加載表數(shù)據(jù),arr數(shù)組數(shù)據(jù)
function loadDataToTb(arr) {
for (var i = 0; i < arr.length; i++) {
addTr(arr[i]);
};
};
//4-1.插入一行,model-數(shù)組元素
function addTr(model) {
var tb = getElement("tbList");//獲得表對(duì)象
var tr = tb.insertRow(-1);//插入一行
tr.insertCell(-1).innerHTML = model.Id;//插入序號(hào)列
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;//設(shè)置捐贈(zèng)單位名稱
tr.insertCell(-1).innerHTML = model.Money;//插入金額列
tr.insertCell(-1).innerHTML = model.Time;//插入捐贈(zèng)時(shí)間列
tr.insertCell(-1).innerHTML = "<a href='#' onclick='setUpdateState(this)'>修改</a> <a href='#' onclick='deleteRow(this)'>刪除</a>";//操作列
};
//5.根據(jù)標(biāo)簽id獲得標(biāo)簽對(duì)象
function getElement(id) {
return document.getElementById(id);
};
//6.刪除行,element-當(dāng)前點(diǎn)擊de
function deleteRow(element) {
if (GlobalUpdateTr != null) {//判斷當(dāng)前是否修改狀態(tài)
rollBack(GlobalUpdateTr);
};
if (!confirm("確定刪除嗎？")) {//確認(rèn)是否要移除
return;
};
var delTr = element.parentNode.parentNode;//獲取刪除行
delTr.parentNode.removeChild(delTr);//移除行
arrDetailData.deleteById(delTr.childNodes[0].innerHTML);//刪除對(duì)應(yīng)的數(shù)組元素
};
//7.修改行
//7-1.定義全局變量,三個(gè)文本框一個(gè)下拉列表，一個(gè)存儲(chǔ)修改行的變量GlobalUpdateTr，標(biāo)記修改狀態(tài)
var inputPersonName = document.createElement("input");//捐贈(zèng)人名稱
inputPersonName.type = "text";
var inputMoney = document.createElement("input");//捐贈(zèng)金額
inputMoney.type = "text";
var inputTime = document.createElement("input");//捐贈(zèng)時(shí)間
inputTime.type = "text";
var selectOrg = document.createElement("select");//受捐單位下拉列表
var GlobalUpdateTr = null;//存儲(chǔ)修改行，標(biāo)記是否修改狀態(tài)
//7.2.設(shè)置當(dāng)前行，為修改狀態(tài),obj-當(dāng)前點(diǎn)擊對(duì)象
function setUpdateState(element) {
if (GlobalUpdateTr != null) {//判斷是否已經(jīng)在修改狀態(tài)
rollBack(GlobalUpdateTr);//還原
};
GlobalUpdateTr = element.parentNode.parentNode;//獲得當(dāng)前修改行
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>";//設(shè)置操作列
};
//7-2-1.當(dāng)前行設(shè)置為修改狀態(tài)（文本設(shè)為文本框）(td:列，element:文本框)
function txtToInput(td,element) {
element.value = td.innerHTML;//設(shè)置obj的值
td.setAttribute("oldValue",td.innerHTML);//保存td的文本值，取消修改時(shí)要取的值
td.appendChild(element);//往列td添加obj
if (td.childNodes[1]) {//判斷是否有文本節(jié)點(diǎn)
td.removeChild(td.childNodes[0]);//移除td的文本節(jié)點(diǎn)
};
};
//7-2-2.當(dāng)前行設(shè)置為修改狀態(tài)（文本設(shè)為下拉列）(td:列，element:下拉列)
function txtToSelect(td, element) {
td.appendChild(element);
td.removeChild(td.childNodes[0]);
element.value = td.getAttribute("OrgId");
};
//7-3.取消修改，恢復(fù)界面，退出修改操作狀態(tài),element-當(dāng)前點(diǎn)擊對(duì)象
function exitUpdateState(element) {
var cancelTr = element.parentNode.parentNode;//取得當(dāng)前行
rollBack(cancelTr);
//退出修改狀態(tài)
GlobalUpdateTr = null;
};
//還原,obj-當(dāng)前修改行/之前的修改行
function rollBack(element) {
element.childNodes[1].innerHTML = element.childNodes[1].getAttribute("oldValue");//恢復(fù)原來(lái)的文本值(名稱)
element.childNodes[3].innerHTML = element.childNodes[3].getAttribute("oldValue");//恢復(fù)原來(lái)的文本值(金額)
element.childNodes[4].innerHTML = element.childNodes[4].getAttribute("oldValue");//恢復(fù)原來(lái)的文本值(日期)
element.childNodes[2].removeChild(selectOrg);//移除下拉列
var orgId = element.childNodes[2].getAttribute("OrgId");//取得捐贈(zèng)單位id
element.childNodes[2].innerHTML = arrOrgData.getOrgById(orgId).OrgName;//恢復(fù)原來(lái)的文本值（捐贈(zèng)單位）
element.childNodes[5].innerHTML = "<a href='#' onclick='setUpdateState(this)'>修改</a> <a href='#' onclick='deleteRow(this)'>刪除</a>";//恢復(fù)操作列
};
//7-4.確定修改，更新界面，更新數(shù)據(jù)，修改完畢退出修改狀態(tài),element-當(dāng)前點(diǎn)擊對(duì)象
function update(element) {
var updateTr = element.parentNode.parentNode;//取得當(dāng)前行
//更新界面
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>";//恢復(fù)操作列
//更新數(shù)據(jù)
//下拉列表的value值就是下拉列表當(dāng)前選項(xiàng)的value值
var model = { "Id": updateTr.childNodes[0].innerHTML, "Name": inputPersonName.value, "OrgId": selectOrg.value, "Money": inputMoney.value, "Time": inputTime.value };//創(chuàng)建與當(dāng)前行數(shù)據(jù)對(duì)應(yīng)的對(duì)象
arrDetailData.update(model);//更新數(shù)組
//退出修改狀態(tài)
GlobalUpdateTr = null;
};
//-------窗口加載完畢觸發(fā)--------//
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 };//創(chuàng)建一個(gè)新數(shù)組元素對(duì)象
model = arrDetailData.addModel(model);//返回新增的元素
addTr(model);//插入新行到表顯示
};
//4.查詢（先刪除當(dāng)前界面所有行，再添加）
getElement("btnSearch").onclick = function () {
var tbList = getElement("tbList");//獲得表
for (var i = tbList.rows.length - 1; i >= 1; i--) {//遍歷刪除表的行，從末端開(kāi)始
tbList.deleteRow(i);//刪除一行
}
var searchId = getElement("selSearchOrg").value;//要查詢的捐贈(zèng)單位id
var arrSearchData = arrDetailData.getSearchData(searchId);//得到查詢數(shù)據(jù)
loadDataToTb(arrSearchData);//(加載)顯示查詢數(shù)據(jù)
};
//5.分頁(yè)（先刪除當(dāng)前界面所有行，再添加）
//5-1.下一頁(yè)
getElement("btnnextPage").onclick = function () {
if (arrDetailData.length == 0) {
alert("沒(méi)有數(shù)據(jù)");
};
//獲取總頁(yè)數(shù)
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) {//判斷是否最后一頁(yè)
alert("最后一頁(yè)啦");
return;//返回
};
var tbList = getElement("tbList");//獲得表對(duì)象
for (var i= tbList.rows.length-1;i>=1; i--) {//刪除表所有行
tbList.deleteRow(i);
}
arrDetailData.pageIndex++;//頁(yè)碼++,取得下一頁(yè)
var arrPage = arrDetailData.getPageData();//獲得一頁(yè)數(shù)據(jù)
loadDataToTb(arrPage);//加載顯示到表
};
//5-2.上一頁(yè)
getElement("btnprePage").onclick = function () {
if (arrDetailData.length == 0) {
alert("沒(méi)有數(shù)據(jù)");
};
//獲取總頁(yè)數(shù)
arrDetailData.pages = arrDetailData.length % arrDetailData.pageCount != 0 ? (arrDetailData.length - arrDetailData.length % arrDetailData.pageCount) / arrDetailData.pageCount + 1 : arrDetailData.length / arrDetailData.pageCount;
if(arrDetailData.pageIndex==1){//判斷是否第一頁(yè)
alert("這個(gè)第一頁(yè)");
return;
};
var tbList = getElement("tbList");//獲得表對(duì)象
for (var i = tbList.rows.length - 1; i >= 1; i--) {//刪除表所有行
tbList.deleteRow(i);
}
arrDetailData.pageIndex--;//頁(yè)碼--，取得上一頁(yè)
var arrPage = arrDetailData.getPageData();//獲得一頁(yè)數(shù)據(jù)
loadDataToTb(arrPage);//加載顯示到表
};
};