Dieser Artikel beschreibt die vollständige Implementierungsmethode des JS -Spendenmanagements. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Die Seite index.html lautet wie folgt:
Kopieren Sie den Code wie folgt: <! DocType html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS Spendenmanagement </title>
<link href = "css/css.css" rel = "stylesheet" type = "text/css"/>
<script type = "text/javaScript">
// Array von gespendeten Einheiten
var listorgs = [
{"ID": "1", "Comname": "One Foundation"},
{"ID": "2", "Comname": "Song Ching Ling Fund"},
{"ID": "3", "Comname": "Tzu Chi Foundation"},
{"id": "4", "comname": "Roter Kreuz"},
{"ID": "5", "Comname": "Wolf Totem"}
];
// fügen Sie dem Listorgs Array -Objekt dynamisch eine anonyme Methode hinzu
listorgs.getorgsbyid = function (id) {
für (var i = 0; i <listOrgs.length; i ++) {
if (listorgs [i] .id == id) {
Return Listorgs [i]; // Rückgabe eines Objekts zurück
}
}
};
// Spendendatenarray
var listData = [
{"ID": "1", "Pername": "Jackie Chan", "Orgid": "1", "Geld": "10000", "Datum": "2012-3-3"},
{"ID": "2", "Pername": "Jet Li", "Orgid": "2", "Geld": "10000", "Datum": "2012-3-3"},
{"ID": "3", "Pername": "Chen Guangbiao", "Orgid": "3", "Geld": "10000", "Datum": "2012-3-3"},
{"ID": "4", "Pername": "Hu Jintao", "Orgid": "1", "Geld": "10000", "Datum": "2012-3-3"},
{"ID": "5", "Pername": "Zhou Xingchi", "Orgid": "2", "Geld": "10000", "Datum": "2012-3-3"},
{"ID": "6", "Pername": "Dawn", "Orgid": "3", "Geld": "10000", "Datum": "2012-3-3"},
{"ID": "7", "Pername": "Werwolf", "Orgid": "3", "Geld": "10000", "Datum": "2012-3-3"},
{"ID": "8", "Pername": "Madman", "Orgid": "3", "Geld": "10000", "Datum": "2012-3-3"},
{"ID": "9", "Pername": "Drei verrückt", "Orgid": "3", "Geld": "10000", "Datum": "2012-3-3"}
];
// Pagination Query Array
listData.fenyequery = function (pagenow, pageSize) {
var res = new Array ();
// 1. Drücken Sie PageSize zu 5, die erste Seite ist ListData [0] -ListData [4] und die zweite Seite ist ListData [5] -ListData [9]
// Die dritte Seite ist ListData [10] -ListData [14]
var start = (pagenow - 1) * pageSize;
var end = listData.length> (pagenow * pageSize)? (pagenow * pageSize): listData.length;
für (var i = start; i <end; i ++) {
Res [res.length] = listData [i];
}
return res;
};
listData.querybyorid = function (orid) {
var arr = new Array ();
für (var i = 0; i <listData.length; i ++) {
if (listData [i] .orgid == orid) {
arr [arr.length] = listData [i];
}
}
arr zurückgeben;
};
listData.idnum = listData.length;
listData.addrec = function (rec) {
listData.idnum ++;
var newrec = {"id": listData.idnum, "Pername": rec.pernname, "orgid": rec.orgid, "Geld": rec.money, "Datum": rec.date};
listData [listData.length] = newrec;
Rückkehr Newrec;
};
listData.Updaterec = function (obj) {
für (var i = 0; i <listData.length; i ++) {
if (listData [i] .id = obj.id) {
listData [i] = obj;
brechen;
}
}
};
// Definieren Sie eine globale Variable, um festzustellen, ob die Persönlichkeit storniert werden soll
var iscancelupdate = false;
// Drei Texteingangsregelungen definieren
var InputPerName = document.createelement ("Eingabe");
InputPerName.Type = "text";
var inputMoney = document.createelement ("Eingabe");
InputPerName.Type = "text";
var inputdate = document.createelement ("Eingabe");
InputPerName.Type = "text";
var seleteOrg = document.createelement ("select");
listData.delrecbyid = function (id) {
für (var i = 0; i <listData.length; i ++) {
if (listData [i] .id == id) {
//löschen
/*
1. Beginnen Sie von dem Ort, an dem sich diese ID befindet, und bewegen Sie jedes Element einzeln nacheinander
2. Das letzte Element wird wiederholt und muss gelöscht werden
*/
für (var j = i; j <listData.length - 1; j ++) {
listData [j] = listData [j + 1];
}
}
}
listData.length = listData.length - 1;
};
// Tauschen Sie den Text in das Textfeld Eingabe ein
Funktion txtToInput (tdname, inputName) {
tdname.setAttribute ("OldValue", tdname.innerhtml); // Speichern Sie zuerst den Originalinhalt, falls abgesagt, stellen Sie es wieder her
inputName.Value = tdname.innerhtml;
tdname.AppendChild (InputName);
tdname.removechild (tdname.firstchild);
}
Funktion txtToSelect (tdname, selobj) {
tdname.appendchild (selobj);
tdname.removechild (tdname.firstchild);
selobj.value = tdname.getAttribute ("orgid");
}
FUNKTION SELECTORTORTEXT (TDNAME) {
var orid = seleteorg.value;
var orgame = listorgs.getOrgsbyId (orid) .ComName;
// tdname.setAttribute ("orgid", seleteorg.value);
tdname.innerhtml = orgname;
}
// Die Eingabe wieder in den Text wenden
Funktion inputTotxt (tdname, inputName) {
// falls angeklickt wird abbrechen
if (iscancelupdate) {
tdname.innerhtml = tdname.getAttribute ("OldValue");
zurückkehren;
}
// klicken, um zu bestätigen, um zu ändern, um zu ändern
tdname.innerhtml = inputName.Value;
}
// Ändern Sie die Steuerelemente zurück in den Text
Funktion seletotxt (tdname, selname) {
// tdname.appendchild (selname);
var orgid = seleteOrg.value;
// das vorherige löschen
tdname.innerhtml = (listorgs.getOrgsbyId (orgid)). comname;
}
// Änderung abbrechen
Funktion CancelUp (obj) {
iscancelupdate = true; // klicken Sie auf Abbrechen
docancel (obj);
iscancelupdate = false;
}
Funktion docancel (obj) {
var trcur = obj.Parentelement.Parentelement;
var tds = trcur.childnodes;
// Alle verwenden die Werte unterhalb des ursprünglichen TD (speichern im Attribut)
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 = 'uptobj (this)'> modify </a>";
// iscancelupdate = false;
// Nachdem bestätigt wurde, dass die Stornierung erfolgreich ist, setzen Sie Trcur auf NULL ein
trcur = null;
}
var trcur = null;
Funktion upobj (obj) {
if (trcur! = null) {
// zeigt an, dass es eine Zeile im Bearbeitungszustand gibt und seine Änderung abgebrochen werden muss
iscancelupdate = true;
// Bearbeitung dieser Zeile abbrechen
docancel (trcur.childnodes [5].
}
// die aktuelle Linie erhalten
trcur = obj.Parentelement.Parentelement;
var tds = trcur.childnodes;
// Spendereingangsänderung
txtToInput (TDS [1], InputPerName);
//Menge
txtToInput (TDS [3], InputMoney);
// Spendendatum
txtToInput (TDS [4], InputDate);
// Abzahlen Sie nach unten, um das Gerät auszuwählen
txtToSelect (TDS [2], SeleteOrg);
// Ändern Sie den Link, um abzubrechen
tds [5] .innerhtml = "<a href = '#' onclick = 'doupObj (this)'> ok </a> <a href = '#' onclick = 'cancelUp (this)'> cances </a>";
}
// Bestätigen Sie, um zu ändern
Funktion doupobj (obj) {
iscancelupdate = false;
trcur = obj.Parentelement.Parentelement;
// 1. Ändern Sie die entsprechenden Datensätze im Array
var rec = {"id": trcur.childnodes [0] .innerhtml, "Pername": trcur.childnodes [1] .Childnodes [0] .Value, "orgid": trcur.childnoden [2] .Childnodes [0] .Value, "Geld": " trcur.childnodes [3] .Childnodes [0] .Value, "Datum": trcur.childnodes [4] .Childnodes [0] .Value};
// Aufrufen der Methode, um die entsprechenden Datensätze in ListData zu ändern
ListData.Updaterec (REC);
// 2. Ändern Sie Datensätze in der Tabelle
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 = 'uptobj (this)'> modify </a>";
//trcur.childnodensuten.
// Nachdem bestätigt wurde, dass die Modifikation erfolgreich ist, setzen Sie TRCur auf NULL ein
trcur = null;
}
// eine Datenzeile löschen
Funktion Delobj (obj) {
// Löschen Sie das entsprechende Array im Array
//1. Um die ausgewählte Zeile zu erhalten
var curtr = obj.Parentelement.Parentelement;
// 2. Holen Sie sich den Wert der ID aus der ersten Spalte
var delid = curtr.cells [0] .innerhtml;
// window.alert (delid);
// 3. Löschen Sie einen Datensatz basierend auf der ID (ListData im Array)
listData.delRecbyid (delid);
// 4. Löschen Sie die angezeigten Zeilen in der Tabellenansicht
curtr.Parentelement.removechild (curtr);
}
Funktion Gel (id) {
return document.getElementById (id);
}
// 1. Abfragen Sie die Bindung des Einheitsnamens, Selele ist: Selet -Element -Knoten
Funktion Loadorglist (Selele) {
für (var i = 0; i <listOrgs.length; i ++) {
var opt = new option (listorgs [i] .comname, listorgs [i] .id);
selele.options.add (opt);
}
}
// 2. Methoden zum Binden von Tabellen und Binden von Tabellen und ListData
Funktion loadDatalist () {
// für (var i = 0; i <listData.length; i ++) {
// addrow (listData [i]);
//}
// Pagination Display
showPage ();
}
Funktion addrow (obj) {
var trnew = gel ("tblist"). Insertrow (-1);
var tdnew = trnew.insertcell (-1);
tdnew.innerhtml = obj.id;
trnew.insertcell (-1) .innerhtml = obj.persname;
var trorggname = trnew.insertcell (-1);
trorgname.setattribute ("orgid", obj.orgid);
trorggname.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 = 'uptobj (this)'> modify </a>";
}
window.onload = function () {
// Bindungsanfrage
Loadorglist (Gel ("selsearchorg"));
// Binden Sie die gespendete Einheit
Loadorglist (Gel ("seladdorg"));
Loadorglist (Seleteorg);
// Tabelle binden und listData
Loaddatalist ();
// Fügen Sie eine neue Schaltfläche hinzu, um ein Ereignis zu binden
Gel ("btnadd"). onclick = function () {
if ((! (Gel ("txtName"). value)) || (! (Gel ("txtMoney"). Wert) || (! (Gel ("txtdate"). Wert)))) {
alarm ("Eingabe kann nicht leer sein");
zurückkehren;
}
// 1. Holen Sie sich den Inhalt der Eingabe und verpacken Sie ihn in ein Objekt (gemäß dem Format von ListData).
var arr = {"Pername": Gel ("txtName"). Wert, "orgid": Gel ("seladdorg"). Wert, "Geld": Gel ("txtMoney"). Wert, "Datum": Gel ("txtdate"). Wert};
// 2. Zum ListData -Array hinzufügen
var res = listData.addrec (arr);
// 3. In der Tabelle angezeigt
var trnew = gel ("tblist"). Insertrow (-1);
trnew.insertcell (-1) .innerhtml = res.id;
trnew.insertcell (-1) .innerhtml = res.pernname;
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 = 'uptobj (this)'> modify </a>";
};
// Ereignis an die Abfrageschaltfläche binden
Gel ("btnsearch"). onclick = function () {
if (Gel ("selesearchorg"). value == -1) {
zurückkehren;
}
// 1. Holen Sie sich die Orgid der Spendereinheit abfragen
var orgid = gel ("selsearchorg"). Wert;
// 2. Definieren Sie eine Methode, die auf Orgid -Abfrage in ListData -Array basiert, und rufen Sie sie hier an
var arrres = listData.QueryByOrid (orgid);
// 3. Entfernen Sie die alten Tabellendaten von der Anzeige, löschen Sie die Anzeige von unten nach oben
var trs = gel ("tblist"). Zeilen;
für (var j = trsgth-1; j> 0; j-) {
Gel ("tblist"). Deleterow (j);
}
// 4. Zeigen Sie neue Daten -ARRRES an
für (var i = 0; i <arrres.length; i ++) {
Addrow (arrres [i]);
}
};
// Ereignisse an die vorherige Seite binden
Gel ("btnprepage"). onclick = function () {
if (pagenow> 1) {
Pagenow--;
showPage ();
} anders {
alarm ("Es ist schon die erste Seite!")
}
};
// Ereignisse an die nächste Seite binden
Gel ("btnnextPage"). onclick = function () {
if (pagenow <listData.length/pageSize)
{
Pagenow ++;
showPage ();
}anders
{
alarm ("Es ist schon die letzte Seite!");
}
};
};
var pagenow = 1;
var pageSize = 5;
Funktion showPage () {
var trs = gel ("tblist"). Zeilen;
für (var j = tr.length-1; j> 0; j-) {
Gel ("tblist"). Deleterow (j);
}
// 1. Geben Sie ein Array gemäß Pagenow und PageSize zurück
var res = listData.fenyequery (pagenow, pageSize);
für (var i = 0; i <res.length; i ++) {
Addrow (res [i]);
}
}
</script>
</head>
<body>
<div id = "Container">
<h1> Spendenmanagement </h1>
<div>
Spendereinheit
<select id = "selsearchorg">
<Option Value = "-1">-Bitte wählen Sie-</Option>
</select>
<Eingabe type = "button" id = "btnsearch" value = "query" /> <Eingabe type = "button" value = "vorherige Seite" id = "btnprepage" /> <Eingabe type = "button" value = "Next Page" id = "btnNextPage" /> <span id = "pagebar"> < /span> < /span>
</div>
<div>
Donor: <Eingabe type = "text" id = "txtName" size = "8" />
Spendereinheit: Spender:
<select id = "seladdorg">
</select>
Betrag: <Eingabe type = "text" id = "txtMoney" size = "8" />
Spendendatum: <Eingabe type = "text" id = "txtdate" size = "10" />
<Eingabe type = "button" id = "btnadd" value = "new" />
</div>
<table id = "tblist" cellpacing = "0" cellpadding = "0">
<tr>
<td> Seriennummer </td>
<td> Donor </td>
<td> gespendete Einheit </td>
<td> Betrag </td>
<td> Spendendatum </td>
<td> Betrieb </td>
</tr>
</table>
</div>
</body>
</html>
CSS.CSS ist wie folgt:
Kopieren Sie den Code wie folgt:* {
Rand: 0px;
Polsterung: 0px;
}
Körper {
Breite: 900px;
Rand: 0px Auto;
Padding-Top: 20px;
}
H1 {
Polsterung: 15px;
Text-Align: Mitte;
}
#Container {
Breite: 900px;
Höhe: Auto;
}
.header, .Search {
Breite: 900px;
Höhe: 30px;
Zeilenhöhe: 30px;
Grenze: 1PX Solid #0094ff;
Rand: 3px;
Polsterung: 0px 5px;
}
.tblist {
Breite: 912px;
Höhe: Auto;
}
.Tblist th {
Grenze: 1PX Solid #000;
Hintergrund: #0094ff;
Höhe: 30px;
Schriftgewicht: fett;
Zeilenhöhe: 30px;
Farbe: #ffff;
}
.Inputshort {
Breite: 100px;
}
.BTN {
Breite: 70px;
Höhe: 25px;
Zeilenhöhe: 25px;
Schriftgewicht: fett;
Text-Align: Mitte;
}
td {
Grenze: 1px fest;
Höhe: 25px;
textindent: 1em;
Grenzkollapse: Zusammenbruch;
}
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.