js實現(xiàn)的捐贈管理完整實例
本文實例講述了js捐贈管理完整實現(xiàn)方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
index.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">
//受捐單位數(shù)組
var listOrgs = [
{ "id": "1", "comName": "壹基金" },
{ "id": "2", "comName": "宋慶齡基金" },
{ "id": "3", "comName": "慈濟(jì)基金" },
{ "id": "4", "comName": "紅十字會" },
{ "id": "5", "comName": "狼圖騰" }
];
//給listOrgs數(shù)組對象動態(tài)添加一個匿名方法
listOrgs.getOrgsById = function (id) {
for (var i = 0; i < listOrgs.length; i++) {
if (listOrgs[i].id == id) {
return listOrgs[i];//返回一個對象
}
}
};
//捐款數(shù)據(jù)數(shù)組
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": "陳光標(biāo)", "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" }
];
//分頁查詢數(shù)組
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.最后一個元素重復(fù)了，要將其清除
*/
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);//先保存原來的內(nèi)容，如果取消，就恢復(fù)
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) {
//如果點(diǎn)擊的是取消
if (isCancelUpdate) {
tdName.innerHTML = tdName.getAttribute("oldValue");
return;
}
//點(diǎn)擊確定修改
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;//點(diǎn)擊的是取消
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 = "<a href='#' onclick='DelObj(this)' >刪除</a> <a href='#' onclick='UpObj(this)'>修改</a>";
// isCancelUpdate = false;
//確定取消成功后就要置trCur為null
trCur = null;
}
var trCur = null;
function UpObj(obj) {
if (trCur != null) {
//說明有行處于編輯狀態(tài)，要取消其修改
isCancelUpdate = true;
//取消那一行的編輯
doCancel(trCur.childNodes[5].firstChild);//trCur.childNodes[5].firstChild,就是上一行的<a 修改>
}
//得到當(dāng)前所在的行
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 = "<a href='#' onclick='doUpObj(this)' >確定</a> <a href='#' onclick='CancelUp(this)'>取消</a>";
}
//確定修改
function doUpObj(obj) {
isCancelUpdate = false;
trCur = obj.parentElement.parentElement;
//1.修改數(shù)組中對應(yīng)的記錄
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 };
//調(diào)用方法來修改ListData中相應(yīng)的記錄
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 = "<a href='#' onclick='DelObj(this)' >刪除</a> <a href='#' onclick='UpObj(this)'>修改</a>";
//trCur.childNodes[2].setAttribute("orgId", SeleteOrg.value);
//確定修改成功后就要置trCur為null
trCur = null;
}
//刪除一行數(shù)據(jù)
function DelObj(obj) {
//刪除數(shù)組中對應(yīng)的數(shù)組
//1.要得到選中的行
var curTr = obj.parentElement.parentElement;
//2.從第一個列中取到id的值
var delId = curTr.cells[0].innerHTML;
// window.alert(delId);
//3.根據(jù)id刪除一條記錄(數(shù)組中l(wèi)istData)
listData.delRecById(delId);
//4.刪除表格視圖中的顯示行
curTr.parentElement.removeChild(curTr);
}
function gel(id) {
return document.getElementById(id);
}
//1.查詢單位名稱的綁定,selEle是:selet元素節(jié)點(diǎn)
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 = "<a href='#' onclick='DelObj(this)' >刪除</a> <a href='#' onclick='UpObj(this)'>修改</a>";
}
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.得到輸入的內(nèi)容，打包成一個對象(按照listData的格式)
var arr = { "perName": gel("txtName").value, "orgId": gel("selAddOrg").value, "money": gel("txtMoney").value, "date": gel("txtDate").value };
//2.添加到listData數(shù)組中
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 = "<a href='#' onclick='DelObj(this)' >刪除</a> <a href='#' onclick='UpObj(this)'>修改</a>";
};
//給查詢按鈕綁定事件
gel("btnSearch").onclick = function () {
if (gel("selSearchOrg").value == -1) {
return;
}
//1.獲取要查詢的受捐贈單位的orgid
var orgId = gel("selSearchOrg").value;
//2.在ListData數(shù)組中定義一個根據(jù)orgid查詢的方法,并在這里調(diào)用
var arrRes = listData.queryByOrId(orgId);
//3.將舊的表格數(shù)據(jù)移除顯示,一定要從下到上清空顯示
var trs = gel("tbList").rows;
for (var j = trs.length-1; j>0; j--) {
gel("tbList").deleteRow(j);
}
//4.顯示新的數(shù)據(jù)arrRes
for (var i = 0; i < arrRes.length; i++) {
addRow(arrRes[i]);
}
};
//給上一頁綁定事件
gel("btnprePage").onclick = function() {
if (pageNow > 1) {
pageNow--;
showPage();
} else {
alert("已經(jīng)是第一頁!")
}
};
//給下一頁綁定事件
gel("btnnextPage").onclick = function () {
if(pageNow<listData.length/pageSize)
{
pageNow++;
showPage();
}else
{
alert("已經(jīng)是最后一頁!");
}
};
};
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.根據(jù)pageNow和pageSize返回一個數(shù)組
var res = listData.fenyeQuery(pageNow, pageSize);
for (var i = 0; i < res.length; i++) {
addRow(res[i]);
}
}
</script>
</head>
<body>
<div id="container">
<h1>捐贈管理</h1>
<div class="search">
受捐單位
<select id="selSearchOrg">
<option value="-1">--請選擇--</option>
</select>
<input type="button" id="btnSearch" value="查詢" class="btn" /> <input type="button" value="上一頁" class="btn" id="btnprePage" /> <input type="button" value="下一頁" class="btn" id="btnnextPage" /><span id="pageBar"></span>
</div>
<div class="search">
捐贈人：<input type="text" id="txtName" class="inputShort" size="8" />
受捐單位：
<select id="selAddOrg">
</select>
金額：<input type="text" id="txtMoney" class="inputShort" size="8" />
受捐日期：<input type="text" id="txtDate" class="inputShort" size="10" />
<input type="button" id="btnAdd" value="新增" class="btn" />
</div>
<table id="tbList" class="tbList" cellspacing="0" cellpadding="0">
<tr class="th">
<td>序號</td>
<td>捐贈人</td>
<td>受捐單位</td>
<td>金額</td>
<td>受捐日期</td>
<td>操作</td>
</tr>
</table>
</div>
</body>
</html>
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程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了JS判斷頁面是否出現(xiàn)滾動條的方法,涉及javascript針對頁面元素的讀取與判定實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
本篇文章主要介紹了js和jquery中獲取非行間樣式的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
最近一直在開發(fā)低代碼平臺的東西,由于項目里面東西有點(diǎn)多,取值或調(diào)用起來比較麻煩,使用本文就將使用Proxy編寫一個取值限制器,需要的小伙伴可以參考下2023-12-12
本文主要介紹了js實現(xiàn)簡單手風(fēng)琴效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
javascript?變量聲明?var,let,const?的區(qū)別
這篇文章主要介紹了javascript?變量聲明?var,let,const?的區(qū)別,變量聲明，每種編程語言必不可少的語法，在javascript中，變量的聲明相對其他語言來說，算是比較簡單的。更多相關(guān)的具體內(nèi)容需要的小伙伴可以參考一下2022-06-06
JavaScript實現(xiàn)的使用鍵盤控制人物走動實例
這篇文章主要介紹了JavaScript實現(xiàn)的使用鍵盤控制人物走動實例,也可說是一個JS實現(xiàn)的小人走動小游戲,需要的朋友可以參考下2014-08-08
這篇文章主要給大家介紹了關(guān)于微信小程序新手教程之頁面打開數(shù)量限制的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
函數(shù)式編程 是一種 編程規(guī)范，也是一種對語言程序（比如JavaScript）本身能力的 運(yùn)用方式。本篇文章將從 編程規(guī)范 來介紹函數(shù)式編程的到底是一種什么樣的規(guī)范，希望對大家有所幫助2023-02-02
layer.alert自定義關(guān)閉回調(diào)事件的方法
今天小編就為大家分享一篇layer.alert自定義關(guān)閉回調(diào)事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了es6函數(shù)之箭頭函數(shù)用法,結(jié)合實例形式詳細(xì)分析了es6箭頭函數(shù)基本功能、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04