This article describes the complete implementation method of js donation management. Share it for your reference. The specific implementation method is as follows:
The index.html page is as follows:
Copy the code as follows: <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js donation management</title>
<link href="css/css.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
//Array of donated units
var listOrgs = [
{ "id": "1", "comName": "One Foundation" },
{ "id": "2", "comName": "Song Ching Ling Fund" },
{ "id": "3", "comName": "Tzu Chi Foundation" },
{ "id": "4", "comName": "Red Cross" },
{ "id": "5", "comName": "Wolf Totem" }
];
// Dynamically add an anonymous method to the listOrgs array object
listOrgs.getOrgsById = function (id) {
for (var i = 0; i < listOrgs.length; i++) {
if (listOrgs[i].id == id) {
return listOrgs[i];//Return an object
}
}
};
//Donation data array
var listData = [
{ "id": "1", "perName": "Jackie Chan", "orgId": "1", "money": "10000", "date": "2012-3-3" },
{ "id": "2", "perName": "Jet Li", "orgId": "2", "money": "10000", "date": "2012-3-3" },
{ "id": "3", "perName": "Chen Guangbiao", "orgId": "3", "money": "10000", "date": "2012-3-3" },
{ "id": "4", "perName": "Hu Jintao", "orgId": "1", "money": "10000", "date": "2012-3-3" },
{ "id": "5", "perName": "Zhou Xingchi", "orgId": "2", "money": "10000", "date": "2012-3-3" },
{ "id": "6", "perName": "dawn", "orgId": "3", "money": "10000", "date": "2012-3-3" },
{ "id": "7", "perName": "werewolf", "orgId": "3", "money": "10000", "date": "2012-3-3" },
{ "id": "8", "perName": "madman", "orgId": "3", "money": "10000", "date": "2012-3-3" },
{ "id": "9", "perName": "Three Crazy", "orgId": "3", "money": "10000", "date": "2012-3-3" }
];
//Pagination query array
listData.fenyeQuery = function (pageNow, pageSize) {
var res = new Array();
//1. Press pageSize to 5, the first page is listData[0]-listData[4], and the second page is listData[5]-listData[9]
//The third page is 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;
}
}
};
//Define a global variable to detect whether to cancel personality
var isCancelUpdate = false;
//Define three text input controls
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) {
//delete
/*
1. Start from the location where this ID is located and move each element behind one by one
2. The last element is repeated, and it needs to be cleared
*/
for (var j = i; j < listData.length - 1; j++) {
listData[j] = listData[j + 1];
}
}
}
listData.length = listData.length - 1;
};
//Swap the text into the input text box
function txtToInput(tdName, inputName) {
tdName.setAttribute("oldValue", tdName.innerHTML);//Save the original content first, if canceled, restore it
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;
}
//Turn input back to text
function InputToTxt(tdName, inputName) {
//If clicked Cancel
if (isCancelUpdate) {
tdName.innerHTML = tdName.getAttribute("oldValue");
return;
}
//Click to confirm to modify
tdName.innerHTML = inputName.value;
}
//Change the select control back to text
function seleToTxt(tdName, selName) {
// tdName.appendChild(selName);
var orgId = SeleteOrg.value;
//Delete the previous one
tdName.innerHTML = (listOrgs.getOrgsById(orgId)).comName;
}
//Cancel Modification
function CancelUp(obj) {
isCancelUpdate = true;//Click Cancel
doCancel(obj);
isCancelUpdate = false;
}
function doCancel(obj) {
var trCur = obj.parentElement.parentElement;
var tds = trCur.childNodes;
//All use the values below the original td (save in 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)' >Delete</a> <a href='#' onclick='UpObj(this)'>Modify</a>";
// isCancelUpdate = false;
//After confirming that the cancellation is successful, set trCur to null
trCur = null;
}
var trCur = null;
function UpObj(obj) {
if (trCur != null) {
//Indicates that there is a line in editing state, and its modification must be canceled
isCancelUpdate = true;
//Cancel editing of that line
doCancel(trCur.childNodes[5].firstChild);//trCur.childNodes[5].firstChild, is the <a modification> of the previous line
}
//Get the current line
trCur = obj.parentElement.parentElement;
var tds = trCur.childNodes;
//Donor input modification
txtToInput(tds[1], InputPerName);
//Amount
txtToInput(tds[3], InputMoney);
//Date of donation
txtToInput(tds[4], InputDate);
// Pull down to select the unit
txtToSelect(tds[2], SeleteOrg);
//Modify the link to cancel
tds[5].innerHTML = "<a href='#' onclick='doUpObj(this)' > OK</a> <a href='#' onclick='CancelUp(this)'>Cancel</a>";
}
//Confirm to modify
function doUpObj(obj) {
isCancelUpdate = false;
trCur = obj.parentElement.parentElement;
//1. Modify the corresponding records in the array
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 };
//Calling the method to modify the corresponding records in ListData
listData.updateRec(rec);
//2. Modify records in the table
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)' >Delete</a> <a href='#' onclick='UpObj(this)'>Modify</a>";
//trCur.childNodes[2].setAttribute("orgId", SeleteOrg.value);
//After confirming that the modification is successful, set trCur to null
trCur = null;
}
//Delete a line of data
function DelObj(obj) {
//Delete the corresponding array in the array
//1.To get the selected row
var curTr = obj.parentElement.parentElement;
//2. Get the value of id from the first column
var delId = curTr.cells[0].innerHTML;
// window.alert(delId);
//3. Delete a record based on id (listData in the array)
listData.delRecById(delId);
//4. Delete the displayed rows in the table view
curTr.parentElement.removeChild(curTr);
}
function gel(id) {
return document.getElementById(id);
}
//1. Query the binding of the unit name, selEle is: selet element node
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. Methods to bind tables and bind tables and listData
function LoadDataList() {
//for (var i = 0; i < listData.length; i++) {
// addRow(listData[i]);
//}
//Pagination display
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)' >Delete</a> <a href='#' onclick='UpObj(this)'>Modify</a>";
}
window.onload = function() {
//Binding query
LoadOrgList(gel("selSearchOrg"));
//Bind the donated unit
LoadOrgList(gel("selAddOrg"));
LoadOrgList(SeleteOrg);
//Bind table and listData
LoadDataList();
//Add a new button to bind an event
gel("btnAdd").onclick = function() {
if ((!(gel("txtName").value)) || (!(gel("txtMoney").value) || (!(gel("txtDate").value)))) {
alert("Input cannot be empty");
return;
}
//1. Get the input content and package it into an object (according to the format of listData)
var arr = { "perName": gel("txtName").value, "orgId": gel("selAddOrg").value, "money": gel("txtMoney").value, "date": gel("txtDate").value };
//2. Add to listData array
var res = listData.addRec(arr);
//3. Displayed in the table
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)' >Delete</a> <a href='#' onclick='UpObj(this)'>Modify</a>";
};
//Bind event to query button
gel("btnSearch").onclick = function () {
if (gel("selSearchOrg").value == -1) {
return;
}
//1. Get the orgid of the donor unit to be queryed
var orgId = gel("selSearchOrg").value;
//2. Define a method based on orgid query in ListData array and call it here
var arrRes = listData.queryByOrId(orgId);
//3. Remove the old table data from display, be sure to clear the display from bottom to top
var trs = gel("tbList").rows;
for (var j = trs.length-1; j>0; j--) {
gel("tbList").deleteRow(j);
}
//4. Show new data arrRes
for (var i = 0; i < arrRes.length; i++) {
addRow(arrRes[i]);
}
};
//Bind events to the previous page
gel("btnprePage").onclick = function() {
if (pageNow > 1) {
pageNow--;
showPage();
} else {
alert("It's already the first page!")
}
};
//Bind events to the next page
gel("btnnextPage").onclick = function () {
if(pageNow<listData.length/pageSize)
{
pageNow++;
showPage();
}else
{
alert("It's already the last page!");
}
};
};
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. Return an array according to pageNow and pageSize
var res = listData.fenyeQuery(pageNow, pageSize);
for (var i = 0; i < res.length; i++) {
addRow(res[i]);
}
}
</script>
</head>
<body>
<div id="container">
<h1>Donation Management</h1>
<div>
Donor-received unit
<select id="selSearchOrg">
<option value="-1">--Please select-</option>
</select>
<input type="button" id="btnSearch" value="query" /> <input type="button" value="previous page" id="btnprePage" /> <input type="button" value="next page" id="btnnextPage" /><span id="pageBar"></span>
</div>
<div>
Donor: <input type="text" id="txtName" size="8" />
Donor-received unit:
<select id="selAddOrg">
</select>
Amount: <input type="text" id="txtMoney" size="8" />
Donation date: <input type="text" id="txtDate" size="10" />
<input type="button" id="btnAdd" value="New" />
</div>
<table id="tbList" cellpacing="0" cellpadding="0">
<tr>
<td>Serial number</td>
<td>Donor</td>
<td>Donated Unit</td>
<td>Amount</td>
<td>Date of donation</td>
<td>Operation</td>
</tr>
</table>
</div>
</body>
</html>
css.css is as follows:
Copy the code as follows:* {
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: #ffff;
}
.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;
}
I hope this article will be helpful to everyone's JavaScript programming.