ตัวอย่างที่สมบูรณ์ของการจัดการการบริจาคที่ดำเนินการโดย JS

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-05-14 10:00:04

บทความนี้อธิบายวิธีการใช้งานที่สมบูรณ์ของการจัดการการบริจาค JS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:

หน้า index.html มีดังนี้:

คัดลอกรหัสดังต่อไปนี้: <! doctype html>

<head>

<title> การจัดการการบริจาค JS </title>

// อาร์เรย์ของหน่วยบริจาค

var listorgs = [

{"id": "1", "comname": "One Foundation"},

{"id": "2", "comname": "กองทุน Song Ching Ling"},

{"id": "3", "comname": "Tzu Chi Foundation"},

{"id": "4", "comname": "สภากาชาด"},

{"id": "5", "comname": "Wolf Totem"}

// เพิ่มวิธีการที่ไม่ระบุชื่อไปยังวัตถุ Array ของ Listorgs แบบไดนามิก

listorgs.getorgsbyid = function (id) {

สำหรับ (var i = 0; i <listorgs.length; i ++) {

if (listorgs [i] .id == id) {

return listorgs [i]; // ส่งคืนวัตถุ

// อาร์เรย์ข้อมูลการบริจาค

var listdata = [

{"id": "1", "pername": "Jackie Chan", "orgid": "1", "money": "10,000", "วันที่": "2012-3-3"},

{"id": "2", "pername": "Jet Li", "orgid": "2", "money": "10,000", "วันที่": "2012-3-3"},

{"id": "3", "pername": "Chen Guangbiao", "orgid": "3", "money": "10,000", "วันที่": "2012-3-3"},

{"id": "4", "pername": "Hu Jintao", "orgid": "1", "money": "10,000", "วันที่": "2012-3-3-3"},

{"id": "5", "pername": "Zhou Xingchi", "orgid": "2", "money": "10,000", "วันที่": "2012-3-3"},

{"id": "6", "pername": "รุ่งอรุณ", "orgid": "3", "money": "10,000", "วันที่": "2012-3-3"},

{"id": "7", "pername": "มนุษย์หมาป่า", "orgid": "3", "money": "10,000", "วันที่": "2012-3-3"},

{"id": "8", "pername": "madman", "orgid": "3", "money": "10,000", "วันที่": "2012-3-3"},

{"id": "9", "pername": "Three Crazy", "orgid": "3", "money": "10,000", "วันที่": "2012-3-3"}

// array array การปนเปื้อน

listdata.fenyequery = function (pagenow, pagesize) {

var res = new Array ();

// 1. กด PageSize ถึง 5 หน้าแรกคือ listdata [0] -listdata [4] และหน้าสองคือ listdata [5] -listdata [9]

// หน้าสามคือ listdata [10] -listdata [14]

var start = (pagenow - 1) * pagesize;

var end = listdata.length> (pagenow * pagesize)? (Pagenow * PageSize): listdata.length;

สำหรับ (var i = start; i <end; i ++) {

res [res.length] = listdata [i];

Ret Res;

ListData.QueryByOrid = function (orid) {

var arr = new Array ();

สำหรับ (var i = 0; i <listdata.length; i ++) {

if (listdata [i] .orgid == orid) {

arr [arr.length] = listdata [i];

กลับ 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, "วันที่": rec.date};

listdata [listdata.length] = newRec;

กลับ Newrec;

listdata.updaterec = function (obj) {

สำหรับ (var i = 0; i <listdata.length; i ++) {

if (listdata [i] .id = obj.id) {

listdata [i] = obj;

หยุดพัก;

// กำหนดตัวแปรทั่วโลกเพื่อตรวจสอบว่าจะยกเลิกบุคลิกภาพหรือไม่

var isCancelUpdate = false;

// กำหนดตัวควบคุมอินพุตข้อความสามตัว

var inputPerName = document.createElement ("อินพุต");

inputPerName.type = "text";

var inputMoney = document.createElement ("อินพุต");

inputPerName.type = "text";

var inputDate = document.createElement ("อินพุต");

inputPerName.type = "text";

var seleteorg = document.createElement ("เลือก");

listdata.delrecbyid = function (id) {

สำหรับ (var i = 0; i <listdata.length; i ++) {

if (listdata [i] .id == id) {

//ลบ

1. เริ่มต้นจากตำแหน่งที่ ID นี้อยู่และย้ายแต่ละองค์ประกอบไว้ข้างหลังทีละหนึ่ง

2. องค์ประกอบสุดท้ายซ้ำแล้วซ้ำอีกและจำเป็นต้องล้าง

สำหรับ (var j = i; j <listdata.length - 1; j ++) {

listdata [j] = listdata [j + 1];

listdata.length = listdata.length - 1;

// เปลี่ยนข้อความลงในกล่องข้อความอินพุต

ฟังก์ชั่น txttoInput (tdName, inputName) {

tdname.setAttribute ("oldValue", tdname.innerhtml); // บันทึกเนื้อหาต้นฉบับก่อนหากยกเลิกให้กู้คืน

inputName.value = tdname.innerhtml;

tdName.AppendChild (InputName);

tdname.removechild (tdname.firstchild);

ฟังก์ชั่น txttoSelect (tdname, selobj) {

tdname.appendchild (Selobj);

tdname.removechild (tdname.firstchild);

selobj.value = tdname.getAttribute ("orgid");

ฟังก์ชั่น selectortext (tdname) {

var orid = seleteorg.value;

var orgname = listorgs.getorgsbyid (orid) .comname;

// tdname.setAttribute ("orgid", seleteorg.value);

tdname.innerhtml = orgname;

// เปลี่ยนอินพุตกลับเป็นข้อความ

ฟังก์ชั่น inputtotxt (tdName, inputName) {

// ถ้าคลิกยกเลิก

if (isCancelUpdate) {

tdname.innerhtml = tdname.getAttribute ("oldValue");

กลับ;

// คลิกเพื่อยืนยันเพื่อแก้ไข

tdname.innerhtml = inputName.Value;

// เปลี่ยนตัวควบคุมเลือกกลับเป็นข้อความ

ฟังก์ชั่น seletotxt (tdname, selname) {

// tdname.appendchild (selname);

var orgid = seleteorg.value;

// ลบอันก่อนหน้า

tdname.innerhtml = (listorgs.getorgsbyid (orgid)). comname;

// ยกเลิกการดัดแปลง

ฟังก์ชั่นยกเลิก (obj) {

isCancelUpdate = true; // คลิกยกเลิก

เอกสาร (OBJ);

isCancelUpdate = false;

ฟังก์ชั่นเอกสาร (obj) {

var trcur = obj.parentelement.parentelement;

var tds = trcur.childnodes;

// ทั้งหมดใช้ค่าด้านล่าง TD ดั้งเดิม (บันทึกในแอตทริบิวต์)

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 (นี่)'> ลบ </a> <a href = '#' onclick = 'upobj (นี่)'> แก้ไข </a>";

// isCancelUpdate = false;

// หลังจากยืนยันว่าการยกเลิกนั้นสำเร็จแล้วให้ตั้งค่า trcur เป็น null

trcur = null;

var trcur = null;

ฟังก์ชั่น upobj (obj) {

if (trcur! = null) {

// ระบุว่ามีบรรทัดในสถานะการแก้ไขและการแก้ไขจะต้องถูกยกเลิก

isCancelUpdate = true;

// ยกเลิกการแก้ไขบรรทัดนั้น

docancel (trcur.childnodes [5] .firstchild); // trcur.childnodes [5]. Firstchild คือ <a modification> ของบรรทัดก่อนหน้า

// รับบรรทัดปัจจุบัน

trcur = obj.parentelement.parentelement;

var tds = trcur.childnodes;

// การปรับเปลี่ยนอินพุตของผู้บริจาค

txttoInput (tds [1], inputpername);

//จำนวน

txttoInput (TDS [3], inputMoney);

// วันที่บริจาค

txttoInput (TDS [4], InputDate);

// ดึงลงเพื่อเลือกเครื่อง

txttoselect (tds [2], seleteorg);

// แก้ไขลิงก์เพื่อยกเลิก

tds [5] .innerhtml = "<a href = '#' onclick = 'doupoBj (นี่)'> ตกลง </a> <a href = '#' onclick = 'ยกเลิก (นี่)'> ยกเลิก </a>";

// ยืนยันการแก้ไข

ฟังก์ชั่น doupobj (obj) {

isCancelUpdate = false;

trcur = obj.parentelement.parentelement;

// 1. แก้ไขระเบียนที่เกี่ยวข้องในอาร์เรย์

var rec = {"id": trcur.childnodes [0] .innerhtml, "pername": trcur.childnodes [1] .childnodes [0] .value, "orgid": trcur.childnodes [2] .childnodes [0] trcur.childnodes [3] .childnodes [0] .value, "วันที่": trcur.childnodes [4] .childnodes [0] .Value};

// การเรียกวิธีการแก้ไขระเบียนที่เกี่ยวข้องใน listData

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 (นี่)'> ลบ </a> <a href = '#' onclick = 'upobj (นี่)'> แก้ไข </a>";

//trcur.childnodes [2 เหมือน. setAttribute("orgid ", seleteorg.value);

// หลังจากยืนยันว่าการดัดแปลงสำเร็จให้ตั้งค่า trcur เป็น null

trcur = null;

// ลบสายข้อมูล

ฟังก์ชั่น delobj (obj) {

// ลบอาร์เรย์ที่เกี่ยวข้องในอาร์เรย์

//1 เพื่อรับแถวที่เลือก

var curtr = obj.parentelement.parentelement;

// 2. รับค่า ID จากคอลัมน์แรก

var delid = curtr.cells [0] .innerhtml;

// window.alert (delid);

// 3. ลบบันทึกตาม ID (listdata ในอาร์เรย์)

listdata.delrecbyid (delid);

// 4. ลบแถวที่แสดงในมุมมองตาราง

curtr.parentelement.removeChild (CORTR);

ฟังก์ชันเจล (id) {

ส่งคืน document.getElementById (id);

// 1. สอบถามการเชื่อมโยงของชื่อหน่วย SELELE IS: SELET ELEMENT NODE

ฟังก์ชั่น loadorglist (selele) {

สำหรับ (var i = 0; i <listorgs.length; i ++) {

var opt = ตัวเลือกใหม่ (listorgs [i] .comname, listorgs [i] .id);

selele.options.add (opt);

// 2. วิธีการผูกตารางและผูกตารางและ listdata

ฟังก์ชั่น loadDatalist () {

// สำหรับ (var i = 0; i <listdata.length; i ++) {

// addrow (listdata [i]);

// หน้าจอแสดงการปนเปื้อน

showpage ();

ฟังก์ชั่น 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 (นี่)'> ลบ </a> <a href = '#' onclick = 'upobj (นี่)'> แก้ไข </a>";

window.onload = function () {

// การสืบค้นที่มีผลผูกพัน

loadorglist (gel ("selsearchorg"));

// ผูกหน่วยบริจาค

loadorglist (gel ("seladdorg"));

Loadorglist (Seleteorg);

// bind table และ listdata

LoadDatalist ();

// เพิ่มปุ่มใหม่เพื่อผูกเหตุการณ์

gel ("btnadd"). onclick = function () {

if ((! (gel ("txtName"). ค่า)) || (! (เจล ("txtMoney"). ค่า) || (! (เจล ("txtdate"). ค่า)))) {

การแจ้งเตือน ("อินพุตไม่สามารถว่างเปล่า");

กลับ;

// 1. รับเนื้อหาอินพุตและบรรจุลงในวัตถุ (ตามรูปแบบของ listdata)

var arr = {"pername": gel ("txtname"). ค่า, "orgid": gel ("seladdorg"). ค่า, "money": gel ("txtmoney"). ค่า, "วันที่": gel ("txtdate"). ค่า};

// 2. เพิ่มไปยัง listdata array

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 (นี่)'> ลบ </a> <a href = '#' onclick = 'upobj (นี่)'> แก้ไข </a>";

// ผูกเหตุการณ์ไปยังปุ่มสอบถาม

gel ("btnsearch"). onclick = function () {

if (gel ("selsearchorg"). value == -1) {

กลับ;

// 1. รับ orgid ของหน่วยผู้บริจาคเพื่อสอบถาม

var orgid = gel ("selsearchorg"). ค่า;

// 2. กำหนดวิธีการตาม orgid query ใน listdata array และเรียกมันที่นี่

var arrres = listdata.QueryByOrid (orgid);

// 3. ลบข้อมูลตารางเก่าออกจากจอแสดงผลตรวจสอบให้แน่ใจว่าได้ล้างหน้าจอจากล่างขึ้นไปด้านบน

var trs = gel ("tblist"). แถว;

สำหรับ (var j = trs.length-1; j> 0; j--) {

เจล ("tblist"). deleterow (j);

// 4. แสดงข้อมูลใหม่

สำหรับ (var i = 0; i <arrres.length; i ++) {

addrow (arrres [i]);

// ผูกเหตุการณ์ไปยังหน้าก่อนหน้า

gel ("btnprepage"). onclick = function () {

if (pagenow> 1) {

PAGENOW-;

showpage ();

} อื่น {

การแจ้งเตือน ("มันเป็นหน้าแรกแล้ว!")

// ผูกเหตุการณ์ไปยังหน้าถัดไป

gel ("btnnextpage"). onclick = function () {

if (pagenow <listdata.length/pagesize)

Pagenow ++;

showpage ();

}อื่น

การแจ้งเตือน ("มันเป็นหน้าสุดท้ายแล้ว!");

var pagenow = 1;

VAR PAGESIZE = 5;

ฟังก์ชั่น showpage () {

var trs = gel ("tblist"). แถว;

สำหรับ (var j = trs.length-1; j> 0; j--) {

เจล ("tblist"). deleterow (j);

// 1. ส่งคืนอาร์เรย์ตาม Pagenow และ Pagesize

var res = listdata.fenyequery (pagenow, pagesize);

สำหรับ (var i = 0; i <res.length; i ++) {

addrow (res [i]);

</script>

</head>

<body>

<H1> การจัดการการบริจาค </h1>

<div>

หน่วยผู้บริจาค

<เลือก id = "selsearchorg">

<ตัวเลือกค่า = "-1">-โปรดเลือก-</opovie>

</เลือก>

<input type = "ปุ่ม" id = "btnsearch" value = "query" /> <อินพุต type = "ปุ่ม" value = "หน้าก่อนหน้า" id = "btnprepage" /> <อินพุตประเภท = "ปุ่ม" value = "หน้าถัดไป" id = "btnnextPage" /> <span id = "pageBar"

</div>

<div>

ผู้บริจาค: <อินพุต type = "text" id = "txtName" size = "8" />>

หน่วยที่ได้รับผู้บริจาค:

<เลือก id = "seladdorg">

</เลือก>

จำนวน: <อินพุต type = "text" id = "txtMoney" size = "8" />

วันที่บริจาค: <อินพุต type = "text" id = "txtdate" size = "10" />>

<อินพุต type = "ปุ่ม" id = "btnadd" value = "ใหม่" />>

</div>

<tr>

<td> หมายเลขซีเรียล </td>

<td> ผู้บริจาค </td>

<td> หน่วยบริจาค </td>

<td> จำนวนเงิน </td>

<td> วันที่บริจาค </td>

<td> การดำเนินการ </td>

</tr>

</table>

</div>

</body>

</html>

CSS.CSS มีดังนี้:

คัดลอกรหัสดังนี้:* {

มาร์จิ้น: 0px;

Padding: 0px;

ร่างกาย {

ความกว้าง: 900px;

มาร์จิ้น: 0px auto;

Padding-Top: 20px;

H1 {

ช่องว่าง: 15px;

TEXT-ALIGN: CENTER;

#คอนเทนเนอร์ {

ความกว้าง: 900px;

ความสูง: อัตโนมัติ;

.header, .search {

ความกว้าง: 900px;

ความสูง: 30px;

ระดับความสูง: 30px;

ชายแดน: 1px Solid #0094ff;

ระยะขอบด้านบน: 3px;

Padding: 0px 5px;

.tblist {

ความกว้าง: 912px;

ความสูง: อัตโนมัติ;

.tblist th {

ชายแดน: 1px Solid #000;

ความเป็นมา: #0094ff;

ความสูง: 30px;

Font-Weight: ตัวหนา;

ระดับความสูง: 30px;

สี: #FFFF;

.inputshort {

ความกว้าง: 100px;

.BTN {

ความกว้าง: 70px;

ความสูง: 25px;

ความสูงของสาย: 25px;

Font-Weight: ตัวหนา;

TEXT-ALIGN: CENTER;

td {

ชายแดน: 1px ของแข็ง;

ความสูง: 25px;

Indent-Indent: 1EM;

การล่มสลายของชายแดน: การล่มสลาย;

ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน