이 기사에서는 JS 기부 관리의 완전한 구현 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
index.html 페이지는 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<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) {
for (var i = 0; i <listorgs.length; i ++) {
if (listorgs [i] .id == id) {
리턴리스트 토그 [i]; // 객체를 반환합니다
}
}
};
// 기부 데이터 배열
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": "늑대 인간", "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 배열
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;
for (var i = start; i <end; i ++) {
res [res.length] = listdata [i];
}
리턴 레스;
};
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];
}
}
반환 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;
NewRec을 반환합니다.
};
ListData.upDaterec = function (obj) {
for (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 = "텍스트";
var inputmoney = document.createElement ( "입력");
inputperName.type = "텍스트";
var inputDate = document.createElement ( "입력");
inputperName.type = "텍스트";
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. 마지막 요소가 반복되고 지워야합니다.
*/
for (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");
}
함수 selectOrext (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; // 취소를 클릭하십시오
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 = 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], 입력 모니);
// 기부 날짜
txttoInput (tds [4], inputDate);
// 유닛을 선택하려면 아래로 당기십시오
txtToSelect (tds [2], seleteorg);
// 링크를 취소하도록 수정합니다
tds [5] .innerhtml = "<a href = '#'onclick = 'doupobj (this)'> ok </a> <a href = '#'onclick = 'cancelup (this)'> 취소 </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] .value, "Money": 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=] .setattribute("orgid ", seleteorg.value);
// 수정이 성공했음을 확인한 후 Trcur를 NULL로 설정하십시오.
trcur = null;
}
// 데이터 줄을 삭제합니다
함수 delobj (obj) {
// 배열에서 해당 배열을 삭제합니다
//1. 선택한 행을 얻으려면
var curtr = obj.parentElement.parentElement;
// 2. 첫 번째 열에서 ID 값을 얻으십시오
var deal = curtr.cells [0] .innerhtml;
// window.alert (Dealid);
// 3. id (배열의 ListData)를 기반으로 레코드 삭제
ListData.DelRecById (Dealid);
// 4. 테이블 뷰에서 표시된 행을 삭제하십시오
curtr.parentelement.removechild (curtr);
}
기능 젤 (ID) {
return document.getElementById (id);
}
// 1. 단위 이름, Selele의 바인딩 쿼리 : Selet 요소 노드
함수 loadorGlist (Selele) {
for (var i = 0; i <listorgs.length; i ++) {
var opt = 새 옵션 (Listorgs [i] .comname, listorgs [i] .id);
selele.options.add (opt);
}
}
// 2. 테이블을 바인딩하고 테이블을 바인딩하는 메소드 및 ListData
함수 loadDatalist () {
// for (var i = 0; i <listdata.length; i ++) {
// addrow (listData [i]);
//}
// Pagination 디스플레이
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 (gel ( "seladdorg"));
loadorGlist (seleteorg);
// 바인드 테이블 및 ListData
loadDatalist ();
// 이벤트를 바인딩하려면 새 버튼을 추가합니다
젤 ( "btnadd"). Onclick = function () {
(! (gel ( "txtname"). value)) || (! (gel ( "txtmoney").
경고 ( "입력이 비어질 수 없음");
반품;
}
// 1. 입력 컨텐츠를 가져 와서 객체로 패키지하십시오 (ListData의 형식에 따라)
var arr = { "pername": gel ( "txtname"). value, "orgid": gel ( "seladdorg"). value, "money": gel ( "txtmoney"). value, "date": gel ( "txtDate"). value};
// 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>";
};
// 쿼리 버튼에 이벤트를 바인딩합니다
젤 ( "btnsearch"). OnClick = function () {
if (gel ( "selsearchorg"). value == -1) {
반품;
}
// 1. 기증자 장치의 조직을 쿼리 할 수 있습니다.
var orgid = gel ( "selsearchorg"). 값;
// 2. ListData 배열에서 Orgid 쿼리를 기반으로 메소드를 정의하고 여기에서 호출하십시오.
var arrres = listdata.querybyorid (orgid);
// 3. 디스플레이에서 이전 테이블 데이터를 제거하고 디스플레이를 하단에서 상단으로 지우십시오.
var trs = gel ( "tblist"). 행;
for (var j = trs.length-1; j> 0; j-) {
겔 ( "tblist"). deleterow (j);
}
// 4. 새로운 데이터 Arrres를 표시하십시오
for (var i = 0; i <arrres.length; i ++) {
Addrow (Arrres [i]);
}
};
// 이벤트를 이전 페이지에 바인딩합니다
겔 ( "btnprepage"). onclick = function () {
if (pagenow> 1) {
Pagenow--;
showpage ();
} 또 다른 {
Alert ( "이미 첫 페이지입니다!")
}
};
// 이벤트를 다음 페이지에 바인딩합니다
젤 ( "btnnextPage"). OnClick = function () {
if (pagenow <listdata.length/pagesize)
{
Pagenow ++;
showpage ();
}또 다른
{
Alert ( "이미 마지막 페이지입니다!");
}
};
};
var pagenow = 1;
var pagesize = 5;
함수 showpage () {
var trs = gel ( "tblist"). 행;
for (var j = trs.length-1; j> 0; j-) {
겔 ( "tblist"). deleterow (j);
}
// 1. Pagenow 및 Pagesize에 따라 배열을 반환하십시오
var res = listdata.fenyequery (pagenow, pagesize);
for (var i = 0; i <res.length; i ++) {
addrow (res [i]);
}
}
</스크립트>
</head>
<body>
<div id = "컨테이너">
<H1> 기부 관리 </h1>
<div>
기증자-수신 유닛
<select id = "selsearchorg">
<옵션 값 = "-1">-선택-</옵션>
</선택>
<입력 유형 = "버튼"id = "btnsearch"value = "query" /> <입력 유형 = "버튼"value = "이전 페이지"id = "btnpRepage" /<입력 유형 = "value ="id = "id ="btnnextPage " /> <span id ="pagebar "> < /span>
</div>
<div>
기증자 : <입력 유형 = "텍스트"id = "txtName"size = "8" />
기증자 후보 유닛 :
<id = "seladdorg">를 선택하십시오
</선택>
양 : <입력 유형 = "텍스트"id = "txtmoney"size = "8" />
기부 날짜 : <입력 유형 = "텍스트"id = "txtDate"size = "10" />
<입력 유형 = "버튼"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>
</tr>
</테이블>
</div>
</body>
</html>
CSS.CSS는 다음과 같습니다.
다음과 같이 코드를 복사하십시오.* {
여백 : 0px;
패딩 : 0px;
}
몸 {
너비 : 900px;
마진 : 0px 자동;
패딩 탑 : 20px;
}
H1 {
패딩 : 15px;
텍스트 정렬 : 센터;
}
#Container {
너비 : 900px;
높이 : 자동;
}
.Header, .search {
너비 : 900px;
높이 : 30px;
라인 높이 : 30px;
테두리 : 1px 고체 #0094ff;
마진-탑 : 3px;
패딩 : 0px 5px;
}
.tblist {
너비 : 912px;
높이 : 자동;
}
.tblist th {
테두리 : 1px 고체 #000;
배경 : #0094ff;
높이 : 30px;
글꼴 중량 : 대담한;
라인 높이 : 30px;
색상 : #ffff;
}
.inputshort {
너비 : 100px;
}
.btn {
너비 : 70px;
높이 : 25px;
라인 높이 : 25px;
글꼴 중량 : 대담한;
텍스트 정렬 : 센터;
}
TD {
국경 : 1px 고체;
높이 : 25px;
텍스트 안정 : 1em;
국경-콜라스 : 붕괴;
}
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.