JavaScript實現增刪改查功能，具體代碼如下：

//1.創(chuàng)建受捐單位數組

var arrOrgData = [

{ "Id": 1, "OrgName": "紅十字會" },

{ "Id": 2, "OrgName": "壹基金" },

{ "Id": 3, "OrgName": "中華慈善總會" },

{ "Id": 4, "OrgName": "中國扶貧基金會" }

];

//1-1.根據受捐單位id，返回受捐單位元素,動態(tài)綁定(定義)方法

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) {//判斷當前是否修改狀態(tài)

rollBack(GlobalUpdateTr);

};

if (!confirm("確定刪除嗎？")) {//確認是否要移除

return;

};

var delTr = element.parentNode.parentNode;//獲取刪除行

delTr.parentNode.removeChild(delTr);//移除行

arrDetailData.deleteById(delTr.childNodes[0].innerHTML);//刪除對應的數組元素

};

//7.修改行

//7-1.定義全局變量,三個文本框一個下拉列表，一個存儲修改行的變量GlobalUpdateTr，標記修改狀態(tài)

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;//存儲修改行，標記是否修改狀態(tài)

//7.2.設置當前行，為修改狀態(tài),obj-當前點擊對象

function setUpdateState(element) {

if (GlobalUpdateTr != null) {//判斷是否已經在修改狀態(tài)

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.當前行設置為修改狀態(tài)（文本設為文本框）(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]) {//判斷是否有文本節(jié)點

td.removeChild(td.childNodes[0]);//移除td的文本節(jié)點

};

};

//7-2-2.當前行設置為修改狀態(tài)（文本設為下拉列）(td:列，element:下拉列)

function txtToSelect(td, element) {

td.appendChild(element);

td.removeChild(td.childNodes[0]);

element.value = td.getAttribute("OrgId");

};

//7-3.取消修改，恢復界面，退出修改操作狀態(tài),element-當前點擊對象

function exitUpdateState(element) {

var cancelTr = element.parentNode.parentNode;//取得當前行

rollBack(cancelTr);

//退出修改狀態(tài)

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.確定修改，更新界面，更新數據，修改完畢退出修改狀態(tài),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 };//創(chuàng)建與當前行數據對應的對象

arrDetailData.update(model);//更新數組

//退出修改狀態(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)建一個新數組元素對象

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);//加載顯示到表

};

};

更多信息請查看IT技術專欄