js_javascript 기술로 구현된 기부 관리의 전체 예-JS 튜토리얼-php.cn

이 기사의 예에서는 js 기부 관리의 전체 구현 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

index.html 페이지는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

http://www.w3.org/1999/xhtml"> js 기부 관리
<스크립트 유형="텍스트/자바스크립트"> //기부 단위 배열
var listOrgs = [
                    { "id": "1", "comName": "원 펀드" },
                     { "id": "2", "comName": "쑹칭링 기금" },
                      { "id": "3", "comName": "Tzu Chi Foundation" },
                   { "id": "4", "comName": "적십자" },
                      { "id": "5", "comName": "늑대 토템" }
];
//listOrgs 배열 객체에 익명 메소드를 동적으로 추가합니다
listOrgs.getOrgsById = 함수(id) {
for (var i = 0; i < listOrgs.length; i ) {
If (listOrgs[i].id == id) {
Return listOrgs[i];//객체 반환
~        ~             };
//기부 데이터 배열
var listData = [
                     { "id": "1", "perName": "성룡", "orgId": "1", "money": "10000", "date": "2012-3-3" },
                      { "id": "2", "perName": "Jet Li", "orgId": "2", "money": "10000", "date": "2012-3-3" },
~ ~ 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": "zhouxingchi", "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": "Crazy Devil", "orgId": "3", "money": "10000", "date": "2012-3-3" },
                    { "id": "9", "perName": "三Crazy", "orgId": "3", "money": "10000", "date": "2012-3-3" }
];
//페이징 쿼리 배열
listData.fenyeQuery = 함수(pageNow, pageSize) {
var res = new Array()
//1. pageSize 5에 따르면 첫 번째 페이지는 listData[0]-listData[4], 두 번째 페이지는 listData[5]-listData[9]
//3페이지는 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] = 목록데이터[i];
            }
            해상도를 반환;
        };

        listData.queryByOrId = 함수(orid) {
            var arr = 새로운 배열();
            for (var i = 0; i < listData.length; i ) {
                if (listData[i].orgId == orid) {
                    arr[arr.length] = 목록데이터[i];
                }
            }

            반환 도착;
        };

        listData.idNum = listData.length;

        listData.addRec = function(rec) {
            목록데이터.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;
//3개의 텍스트 입력 컨트롤 정의
var InputPerName = document.createElement("input")
InputPerName.type = "텍스트"

var InputMoney = document.createElement("input")
InputPerName.type = "텍스트"

var InputDate = document.createElement("input")
InputPerName.type = "텍스트"

var SeleteOrg = document.createElement("select")

listData.delRecById = 함수(id) {
for (var i = 0; i < listData.length; i ) {
If (listData[i].id == id) {
//삭제 ~ 1. 이 ID가 있는 위치부터 시작하여 뒤쪽의 모든 요소를 하나로 이동합니다
~ > for (var j = i; j < listData.length - 1; j ) {
목록데이터[j] = 목록데이터[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")
~
함수 선택기텍스트(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) {
IScanceelupDate = TRUE; // 취소하려면 클릭하세요
doCancel(obj)
| ~
함수 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>";
                    // 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, 이전 줄의 <수정> ~
//현재 행 가져오기
              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>";
~ //수정 확인
함수 doUpObj(obj) {
|               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 = "삭제 ";

//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. 테이블 뷰에 표시된 행을 삭제합니다
>          }

함수 젤(id) {

return document.getElementById(id)

~
//1. 유닛 이름 바인딩 쿼리 selEle is: selet 요소 노드
함수 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. 테이블 바인딩 및 테이블과 listData 바인딩 방법

함수 LoadDataList() {
//for (var i = 0; i < listData.length; i ) {
추가 Row(listData[i]);                             //페이지 표시
페이지 표시()

}

함수 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 = "삭제 수정";
         }

window.onload = function() {
//바인딩 쿼리
            LoadOrgList(gel("selSearchOrg"))
//기부금 수령자 바인딩
LoadOrgList(gel("selAddOrg"))
             LoadOrgList(SeleteOrg)
//테이블과 listData 바인딩
             LoadDataList()

//새 버튼에 이벤트 바인딩
gel("btnAdd").onclick = function() {
If ((!(gel("txtName").value)) || (!(gel("txtMoney").value) || (!(gel("txtDate").value)))) {
Alert("입력값은 비워둘 수 없습니다.")
반품
~
//1. 입력 콘텐츠를 가져와서 객체로 패키징합니다(listData 형식에 따라)
var arr = { "perName": gel("txtName").value, "orgId": gel("selAddOrg").value, "money": gel("txtMoney").value, "date": gel(" txtDate").value };
//2. 목록 데이터 배열에 추가
var res = listData.addRec(arr)
//3. 테이블에 표시
var trnew = gel("tbList").insertRow(-1)
> + ,,,,,, in in in in, in, in, in, in, ... in, - in, ...                      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 = "삭제 수정";
              };
//쿼리 버튼에 이벤트 바인딩
gel("btnSearch").onclick = 함수 () {
If (gel("selSearchOrg").value == -1) {
반품
~
//1. 쿼리할 기부 단위의 orgid를 가져옵니다
var orgId = gel("selSearchOrg").value;
//2. ListData 배열의 orgid를 기반으로 쿼리할 메서드를 정의하고 여기에서 호출합니다.
var arrRes = listData.queryByOrId(orgId)
//3. 디스플레이에서 이전 테이블 데이터를 제거하고, 아래에서 위로 디스플레이를 지워야 합니다.
var trs = gel("tbList").rows

for (var j = trs.length-1; j>0; j--) {
gel("tbList").deleteRow(j)
~        //4. 새로운 데이터 arrRes 표시
for (var i = 0; i < arrRes.length; i ) {
                     addRow(arrRes[i])
~              }

//이전 페이지에 이벤트 바인딩
gel("btnprePage").onclick = function() {
If (pageNow > 1) {
페이지지금--;                     showPage()
| Alert("이미 첫 페이지입니다!")
~               };                                   //이벤트를 다음 페이지에 바인딩
gel("btnnextPage").onclick = 함수 () {
If(pageNow ~ 페이지지금
                     showPage()
~      ~ Alert("마지막 페이지입니다!")
~              };                                                   };                              var pageNow = 1;
var 페이지 크기 = 5
함수 showPage() {
var trs = gel("tbList").rows

for (var j = trs.length - 1; j > 0; j--) {
gel("tbList").deleteRow(j)
~
//1. pageNow 및 pageSize
를 기반으로 배열을 반환합니다. var res = listData.fenyeQuery(pageNow, pageSize)
for (var i = 0; i < res.length; i ) {
                    addRow(res[i])
~   ~