تصف هذه المقالة طريقة التنفيذ الكاملة لإدارة التبرع JS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
صفحة index.html كما يلي:
انسخ الرمز كما يلي: <! doctype 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">
// مجموعة من الوحدات المتبرع بها
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"}
] ؛
// أضف ديناميكيًا طريقة مجهولة إلى كائن صفيف 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": "10000"
{"id": "2" ، "pername": "jet li" ، "orgid": "2" ، "Money": "10000" ، "Date": "2012-3-3"} ،
{"id": "3" ، "pername": "Chen Guangbiao" ، "Orgid": "3" ، "Money": "10000" ، "Date":
{"id": "4" ، "pername": "Hu Jintao" ، "Orgid": "1" ، "Money": "10000" ، "Date": "2012-3-3} ،
{"id": "5" ، "pername": "Zhou Xingchi" ، "Orgid": "2" ، "Money": "10000" ، "Date":
{"id": "6" ، "Pername": "Dawn" ، "Orgid": "3" ، "Money": "10000" ، "Date": "2012-3-3"} ،
{"id": "7" ، "pername": "werwolf" ، "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"}
] ؛
// ترقيم الصفحات صفيف الاستعلام
listdata.fenyequery = وظيفة (pagenow ، pagesize) {
var res = new array () ؛
// 1. اضغط على Pagesize to 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] ؛
}
عودة الدقة ؛
} ؛
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 ، "date": rec.date} ؛
ListData [listData.Length] = 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 ("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) {
لـ (var i = 0 ؛ i <listdata.length ؛ i ++) {
if (listData [i] .id == id) {
//يمسح
/*
1. ابدأ من الموقع حيث يوجد هذا المعرف ونقل كل عنصر خلف واحد تلو الآخر
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.getAtTriment ("orgid") ؛
}
دالة SelectOttext (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 ؛
}
// إلغاء التعديل
وظيفة CancelUp (obj) {
iscancelupdate = true ؛ // انقر فوق إلغاء
Docancel (OBJ) ؛
iscancelupdate = false ؛
}
وظيفة docancel (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 (this)' 'delete </a> <a href ='#'onClick =' UpObj (this) '> modify </a>" ؛
// iscancelupdate = false ؛
// بعد التأكيد على أن الإلغاء ناجح ، قم بتعيين Trcur على Null
trcur = null ؛
}
var trcur = null ؛
وظيفة upobj (obj) {
if (trcur! = null) {
// يشير إلى وجود خط في حالة التحرير ، ويجب إلغاء تعديله
iscancelupdate = صحيح ؛
// إلغاء تحرير هذا الخط
Docancel (trcur.childnodes [5] .firstchild) ؛ // trcur.childnodes [5].
}
// احصل على الخط الحالي
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 (this)'> ok </a> <a href = '#' onClick = 'cancelup (this)'> cancel </a>" ؛
}
// تأكيد لتعديل
وظيفة doupobj (obj) {
iscancelupdate = false ؛
trcur = obj.parentElement.ParentElement ؛
// 1. تعديل السجلات المقابلة في الصفيف
var rec = {"id": trcur.childnodes [0] .innerhtml ، "pername": trcur.childnodes [1] trcur.childnodes [3] .ChildNodes [0]. value ، "date": 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 (this)'> delete </a> <a href = '#' onClick = 'UpObj (this)'> modify </a>" ؛
//trcur.childnodes budap2/2011.setattribute("orgid "، seleteorg.value) ؛
// بعد التأكيد على أن التعديل ناجح ، قم بتعيين Trcur على Null
trcur = null ؛
}
// حذف خط من البيانات
وظيفة delobj (obj) {
// حذف الصفيف المقابل في الصفيف
//1. للحصول على الصف المحدد
var curtr = obj.parentElement.ParentElement ؛
// 2. احصل على قيمة المعرف من العمود الأول
var delid = curtr.cells [0] .innerhtml ؛
// window.alert (delid) ؛
// 3. حذف سجل يعتمد على المعرف (ListData في المصفوفة)
listdata.delrecbyid (delid) ؛
// 4. حذف الصفوف المعروضة في عرض الجدول
Curtr.ParentElement.removechild (Curtr) ؛
}
وظيفة هلام (معرف) {
return document.getElementById (id) ؛
}
// 1. الاستعلام عن ربط اسم الوحدة ، Selele هو: عقدة عنصر Selet
وظيفة 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 (this)'> delete </a> <a href = '#' onClick = 'UpObj (this)'> modify </a>" ؛
}
window.onload = function () {
// الاستعلام الملزم
loadorglist (gel ("selsearchorg")) ؛
// ربط الوحدة المتبرع بها
loadorglist (هلام ("seladdorg")) ؛
loadorglist (seleteorg) ؛
// BIND TABLE و LISTDATA
loadDatalist () ؛
// أضف زرًا جديدًا لربط حدث
هلام ("btnadd"). onclick = function () {
if ((! (gel ("txtname"). value)) || (! (gel ("txtmoney"). value) || (! (gel ("txtdate"). value)))) {
تنبيه ("لا يمكن أن يكون الإدخال فارغًا") ؛
يعود؛
}
// 1. احصل على محتوى الإدخال وحزمه في كائن (وفقًا لتنسيق ListData)
var arr = {"pername": gel ("txtname"). value ، "orgid": gel ("seladdorg"). value ، "money": gel (
// 2. أضف إلى صفيف ListData
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)'> delete </a> <a href = '#' onClick = 'UpObj (this)'> modify </a>" ؛
} ؛
// BIND الحدث لزر الاستعلام
هلام ("btnsearch"). onClick = function () {
if (gel ("selsearchorg"). value == -1) {
يعود؛
}
// 1. احصل على orgid من وحدة المانحين ليتم الاستعلام عنها
var orgid = gel ("selsocharorg"). القيمة ؛
// 2. حدد طريقة تعتمد على argid query في صفيف ListData واتصل بها هنا
var regrres = listdata.querybyorid (orgid) ؛
// 3. قم بإزالة بيانات الجدول القديم من الشاشة ، تأكد من مسح الشاشة من أسفل إلى أعلى
var trs = gel ("tblist"). صفوف ؛
لـ (var j = trs.length-1 ؛ j> 0 ؛ j--) {
هلام ("tblist"). deleterow (j) ؛
}
// 4. إظهار ميدان البيانات الجديدة
لـ (var i = 0 ؛ i <rentrres.length ؛ i ++) {
addrow (RERRES [i]) ؛
}
} ؛
// ربط الأحداث بالصفحة السابقة
هلام ("btnprepage"). onclick = function () {
if (pagenow> 1) {
Pagenow-- ؛
showpage () ؛
} آخر {
تنبيه ("إنها بالفعل الصفحة الأولى!")
}
} ؛
// ربط الأحداث بالصفحة التالية
هلام ("btnnextpage"). onClick = function () {
إذا (Pagenow <listdata.length/pagesize)
{
Pagenow ++ ؛
showpage () ؛
}آخر
{
تنبيه ("إنها بالفعل الصفحة الأخيرة!") ؛
}
} ؛
} ؛
var pagenow = 1 ؛
var pagesize = 5 ؛
وظيفة العرض () {
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>
<div id = "container">
<h1> إدارة التبرع </h1>
<viv>
وحدة التي تم استقبالها للمانحين
<حدد ID = "Selsearchorg">
<Option Value = "-1">-الرجاء تحديد-</Option>
</select>
<type type = "button" id = "btnsearch" value = "query" /> <input type = "button" value = "previous page" id = "btnprepage" /> <input type = "button" value = "page id =" btnnextPage " /> <span id =
</div>
<viv>
المانح: <إدخال type = "text" id = "txtName" size = "8" />
وحدة استقبال المانحين:
<SELECT ID = "Seladdorg">
</select>
المبلغ: <type type = "text" id = "txtMoney" size = "8" />
تاريخ التبرع: <إدخال type = "text" id = "txtDate" size = "10" />
<type type = "button" id = "btnadd" value = "new" />
</div>
<table id = "tblist" cellpacing = "0" cellpadding = "0">
<tr>
<td> الرقم التسلسلي </td>
<td> المانح </td>
<td> الوحدة المتبرع بها </td>
<td> المبلغ </td>
<td> تاريخ التبرع </td>
<td> العملية </td>
</r>
</table>
</div>
</body>
</html>
CSS.CSS كما يلي:
انسخ الرمز كما يلي:* {
الهامش: 0px ؛
الحشو: 0px ؛
}
جسم {
العرض: 900 بكسل ؛
الهامش: 0px Auto ؛
الحشو أعلى: 20 بكسل ؛
}
H1 {
الحشو: 15 بكسل ؛
محاذاة النص: المركز ؛
}
#حاوية {
العرض: 900 بكسل ؛
الارتفاع: السيارات ؛
}
.Header ، .Search {
العرض: 900 بكسل ؛
الارتفاع: 30 بكسل ؛
ارتفاع الخط: 30 بكسل ؛
الحدود: 1 بكسل Solid #0094ff ؛
الهامش: 3px ؛
الحشو: 0px 5px ؛
}
.tblist {
العرض: 912 بكسل ؛
الارتفاع: السيارات ؛
}
.tblist th {
الحدود: 1 بكسل الصلبة #000 ؛
الخلفية: #0094ff ؛
الارتفاع: 30 بكسل ؛
خط الرصيف: جريئة ؛
ارتفاع الخط: 30 بكسل ؛
اللون: #ffff ؛
}
.inputshort {
العرض: 100px ؛
}
.btn {
العرض: 70 بكسل ؛
الارتفاع: 25 بكسل ؛
رفع الخط: 25 بكسل ؛
خط الرصيف: جريئة ؛
محاذاة النص: المركز ؛
}
td {
الحدود: 1 بكسل صلبة.
الارتفاع: 25 بكسل ؛
استولى النص: 1EM ؛
حدود الحدود: الانهيار.
}
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.