DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js實現的捐贈管理完整實例
js實現的捐贈管理完整實例
編輯:關於JavaScript     

本文實例講述了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": "壹基金" }, 
            { "id": "2", "comName": "宋慶齡基金" }, 
            { "id": "3", "comName": "慈濟基金" }, 
            { "id": "4", "comName": "紅十字會" }, 
            { "id": "5", "comName": "狼圖騰" } 
        ]; 
        //給listOrgs數組對象動態添加一個匿名方法 
        listOrgs.getOrgsById = function (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": "李連傑", "orgId": "2", "money": "10000", "date": "2012-3-3" }, 
            { "id": "3", "perName": "陳光標", "orgId": "3", "money": "10000", "date": "2012-3-3" }, 
            { "id": "4", "perName": "胡錦濤", "orgId": "1", "money": "10000", "date": "2012-3-3" }, 
            { "id": "5", "perName": "周星池", "orgId": "2", "money": "10000", "date": "2012-3-3" }, 
            { "id": "6", "perName": "黎明", "orgId": "3", "money": "10000", "date": "2012-3-3" }, 
            { "id": "7", "perName": "狼人", "orgId": "3", "money": "10000", "date": "2012-3-3" }, 
            { "id": "8", "perName": "狂魔", "orgId": "3", "money": "10000", "date": "2012-3-3" }, 
            { "id": "9", "perName": "三瘋", "orgId": "3", "money": "10000", "date": "2012-3-3" } 
        ]; 
        //分頁查詢數組 
        listData.fenyeQuery = function (pageNow, pageSize) { 
            var res = new Array(); 
            //1.按pageSize為5,第1頁就是listData[0]-listData[4],第2頁就是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] = listData[i]; 
            } 
            return res; 
        }; 
 
        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]; 
                } 
            } 
 
            return 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; 
            return newRec; 
        }; 

        listData.updateRec = function(obj) { 
            for (var i = 0; i < listData.length; i++) { 
                if (listData[i].id = obj.id) { 
                    listData[i] = obj; 
                    break; 
                } 
            } 
        }; 
 
        //定義一個全局的變量 ,檢測是否取消個性 
        var isCancelUpdate = false; 
        //定義三個文本input控件 
        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) { 
            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; 
        }; 
 
        //把文本換成input文本框 
        function txtToInput(tdName, inputName) { 
            tdName.setAttribute("oldValue", tdName.innerHTML);//先保存原來的內容,如果取消,就恢復 
            inputName.value = tdName.innerHTML; 
            tdName.appendChild(inputName); 
            tdName.removeChild(tdName.firstChild); 
        } 
 
        function txtToSelect(tdName, selObj) { 
            tdName.appendChild(selObj); 
            tdName.removeChild(tdName.firstChild); 
            selObj.value = tdName.getAttribute("orgId"); 
        } 
 
        function selectorText(tdName) { 
            var orid = SeleteOrg.value; 
            var orgName = listOrgs.getOrgsById(orid).comName; 
           // tdName.setAttribute("orgId", SeleteOrg.value); 
            tdName.innerHTML = orgName; 
        } 
 
        //把input變回文本 
        function InputToTxt(tdName, inputName) { 
            //如果點擊的是取消 
            if (isCancelUpdate) { 
                tdName.innerHTML = tdName.getAttribute("oldValue"); 
                return; 
            } 
            //點擊確定修改 
            tdName.innerHTML = inputName.value; 
        } 
         
        //把select控件變回文本 
        function seleToTxt(tdName, selName) { 
           // tdName.appendChild(selName); 
            var orgId = SeleteOrg.value; 
            //刪除之前的 
            tdName.innerHTML = (listOrgs.getOrgsById(orgId)).comName; 
        } 
 
        //取消修改 
        function CancelUp(obj) { 
            isCancelUpdate = true;//點擊的是取消 
            doCancel(obj); 
            isCancelUpdate = false; 
        } 
 
        function  doCancel(obj) { 
            var trCur = obj.parentElement.parentElement; 
            var tds = trCur.childNodes; 
            //全部使用原始的td下面的值(保存在Attribute中) 
            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)' >刪除</a> <a href='#' onclick='UpObj(this)'>修改</a>"; 
           // isCancelUpdate = false; 
            //確定取消成功後就要置trCur為null 
            trCur = null; 
        } 
        var trCur = null; 
 
        function UpObj(obj) { 
            if (trCur != null) { 
                //說明有行處於編輯狀態,要取消其修改 
                isCancelUpdate = true; 
                //取消那一行的編輯 
                doCancel(trCur.childNodes[5].firstChild);//trCur.childNodes[5].firstChild,就是上一行的<a 修改> 
            } 
 
            //得到當前所在的行 
            trCur = obj.parentElement.parentElement; 
            var tds = trCur.childNodes; 
            //捐贈人input修改 
            txtToInput(tds[1], InputPerName); 
            //金額 
            txtToInput(tds[3], InputMoney); 
            //受捐日期 
            txtToInput(tds[4], InputDate); 
            //下拉選擇單位 
            txtToSelect(tds[2], SeleteOrg); 
 
            //修改鏈接變成取消 
            tds[5].innerHTML = "<a href='#' onclick='doUpObj(this)' >確定</a> <a href='#' onclick='CancelUp(this)'>取消</a>"; 
        } 
         
        //確定修改 
        function 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)' >刪除</a> <a href='#' onclick='UpObj(this)'>修改</a>"; 

            //trCur.childNodes[2].setAttribute("orgId", SeleteOrg.value);
            //確定修改成功後就要置trCur為null 
            trCur = null; 
        } 

        //刪除一行數據 

        function 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(curTr); 
        } 

        function gel(id) { 
            return document.getElementById(id); 
        } 
 
        //1.查詢單位名稱的綁定,selEle是:selet元素節點 
        function 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的方法 

        function LoadDataList() { 
            //for (var i = 0; i < listData.length; i++) { 
            //    addRow(listData[i]); 
            //} 
            //分頁顯示 
            showPage(); 
        } 

        function 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)' >刪除</a> <a href='#' onclick='UpObj(this)'>修改</a>"; 
        } 

        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("輸入不能為空"); 
                    return; 
                } 
 
                //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)' >刪除</a> <a href='#' onclick='UpObj(this)'>修改</a>"; 
            }; 
 
            //給查詢按鈕綁定事件 
            gel("btnSearch").onclick = function () { 
                if (gel("selSearchOrg").value == -1) { 
                    return; 
                } 
 
                //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) { 
                   pageNow--; 
                   showPage(); 
               } else { 
                   alert("已經是第一頁!") 
               } 
            }; 
            //給下一頁綁定事件 
            gel("btnnextPage").onclick = function () { 
                if(pageNow<listData.length/pageSize) 
                { 
                    pageNow++; 
                    showPage(); 
                }else 
                { 
                    alert("已經是最後一頁!"); 
                }  
            };  
        }; 
        var pageNow = 1; 
        var pageSize = 5; 
        function 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]); 
            } 
        } 
    </script> 
</head> 
<body> 
    <div id="container"> 
        <h1>捐贈管理</h1> 
        <div class="search"> 
            受捐單位 
            <select id="selSearchOrg"> 
                <option value="-1">--請選擇--</option> 
            </select> 
            <input type="button" id="btnSearch" value="查詢" class="btn" /> <input type="button" value="上一頁" class="btn" id="btnprePage" /> <input type="button" value="下一頁" class="btn" id="btnnextPage" /><span id="pageBar"></span> 
        </div> 
        <div class="search"> 
            捐贈人:<input type="text" id="txtName" class="inputShort" size="8" /> 
            受捐單位: 
            <select id="selAddOrg"> 
            </select> 
            金額:<input type="text" id="txtMoney" class="inputShort" size="8" /> 
            受捐日期:<input type="text" id="txtDate" class="inputShort" size="10" /> 
            <input type="button" id="btnAdd" value="新增" class="btn" />
        </div> 
        <table id="tbList" class="tbList" cellspacing="0" cellpadding="0"> 
            <tr class="th"> 
                <td>序號</td> 
                <td>捐贈人</td> 
                <td>受捐單位</td> 
                <td>金額</td> 
                <td>受捐日期</td> 
                <td>操作</td> 
            </tr> 
        </table> 
    </div> 
</body> 
</html>

css.css如下:
復制代碼 代碼如下:* { 
      margin: 0px; 
      padding: 0px; 
  } 
 
  body { 
      width: 900px; 
      margin: 0px auto; 
      padding-top: 20px; 
  } 
 
  h1 { 
      padding: 15px; 
      text-align: center; 
  } 
 
  #container { 
      width: 900px; 
      height: auto; 
  } 
 
  .header, .search { 
      width: 900px; 
      height: 30px; 
      line-height: 30px; 
      border: 1px solid #0094ff; 
      margin-top: 3px; 
      padding: 0px 5px; 
  } 
 
  .tbList { 
      width: 912px; 
      height: auto; 
  } 
 
      .tbList th { 
          border: 1px solid #000; 
          background: #0094ff; 
          height: 30px; 
          font-weight: bold; 
          line-height: 30px; 
          color: #fff; 
      } 
 
  .inputShort { 
      width: 100px; 
  } 
 
  .btn { 
      width: 70px; 
      height: 25px; 
      line-height: 25px; 
      font-weight: bold; 
      text-align: center; 
  } 
 
  td { 
      border: 1px solid; 
      height: 25px; 
      text-indent: 1em; 
      border-collapse: collapse; 
  }

希望本文所述對大家的javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved