javaScript实现增删改查

[1].[代码] [JavaScript]代码 跳至 [1] [2] [3]

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266

//1.创建受捐单位数组 var arrOrgData = [      { "Id" : 1, "OrgName" : "红十字会" },      { "Id" : 2, "OrgName" : "壹基金" },      { "Id" : 3, "OrgName" : "中华慈善总会" },      { "Id" : 4, "OrgName" : "中国扶贫基金会" } ]; //1-1.根据受捐单位id，返回受捐单位元素,动态绑定(定义)方法 arrOrgData.getOrgById = function (id) {      for ( var i = 0; i < this .length; i++) {          if ( this [i].Id == id) {              return this [i];          };      }; }; //2.详细捐赠信息数组 var arrDetailData = [      { "Id" : 1, "Name" : "成龙" , "OrgId" : 1, "Money" : "1000" , "Time" : "2013 - 07 - 08" },      { "Id" : 2, "Name" : "肥龙" , "OrgId" : 2, "Money" : "2000" , "Time" : "2013 - 07 - 08" },      { "Id" : 3, "Name" : "瘦龙" , "OrgId" : 3, "Money" : "3000" , "Time" : "2013 - 07 - 08" },      { "Id" : 4, "Name" : "傻龙" , "OrgId" : 4, "Money" : "4000" , "Time" : "2013 - 07 - 08" } ]; //2.1.根据id删除数组元素 arrDetailData.deleteById = function (id) {      for ( var i = 0; i < this .length; i++) {          if ( this [i].Id == id) {              //元素前移              for ( var j = i; j < this .length - 1; j++) {                  this [j] = this [j + 1];              };              //数组长度--              this .length--;              break ;          };      }; }; //2-2.更新数据，model-修改后的对象 arrDetailData.update = function (model) {      for ( var i = 0; i < this .length; i++) {          if ( this [i].Id == model.Id) {              this [i] = model;              break ;          };      }; }; //2-3.新增数据，并返回新增的元素 var modelId=arrDetailData.length; //定义变量，存储数组元素的Id arrDetailData.addModel = function (model) {      modelId++; //每次添加序号++      model.Id = modelId; //设置添加对象的Id      this [ this .length] = model; //数组元素++，在length      return model; }; //2-4.根据捐赠单位Id返回数组 arrDetailData.getSearchData = function (id) {      if (id==-1){ //id为-1返回所有数据          return this ;      };      //定义存储查询数据的数组      var arrSearch = new Array();      for ( var i = 0; i < this .length; i++) {          if ( this [i].OrgId==id){ //判断OrgId是否符合条件              arrSearch[arrSearch.length]= this [i];          };      };      return arrSearch; }; //2-5.返回一页数据 arrDetailData.pageIndex = 1; //页码 arrDetailData.pageCount = 5; //每页记录条数 arrDetailData.pages=0; //总页数 //返回第pageIndex页数据 arrDetailData.getPageData = function () {      var pageData = new Array(); //定义数组存储一页数据      for ( var i = ( this .pageIndex - 1) * this .pageCount; i < this .pageIndex * this .pageCount; i++) { //获取第pageIndex页数据          //alert(this[i]);          if ( this [i]) { //判断this[i]是否undefined,过滤掉              pageData[pageData.length] = this [i];          };      }      return pageData; }; //3.加载受捐单位信息,element-传入select对象 function loadOrgData(element) {      for ( var i = 0; i < arrOrgData.length; i++) {          var opt = new Option(arrOrgData[i].OrgName, arrDetailData[i].Id);          element.options.add(opt);      }; }; //4.加载表数据（详细信息） function loadDetailData() {      for ( var i = 0; i < arrDetailData.length; i++) {          addTr(arrDetailData[i]);      } }; //4-1.加载表数据,arr数组数据 function loadDataToTb(arr) {      for ( var i = 0; i < arr.length; i++) {          addTr(arr[i]);      }; }; //4-1.插入一行,model-数组元素 function addTr(model) {      var tb = getElement( "tbList" ); //获得表对象      var tr = tb.insertRow(-1); //插入一行      tr.insertCell(-1).innerHTML = model.Id; //插入序号列      tr.insertCell(-1).innerHTML = model.Name; //插入名称列      var td = tr.insertCell(-1); //插入OrgId列      td.setAttribute( "OrgId" , model.OrgId); //保存OrgId到td的OrgId属性（自定义）      td.innerHTML = arrOrgData.getOrgById(model.OrgId).OrgName; //设置捐赠单位名称      tr.insertCell(-1).innerHTML = model.Money; //插入金额列      tr.insertCell(-1).innerHTML = model.Time; //插入捐赠时间列      tr.insertCell(-1).innerHTML = "<a href='#' onclick='setUpdateState(this)'>修改</a>&nbsp;&nbsp;<a href='#' onclick='deleteRow(this)'>删除</a>" ; //操作列 }; //5.根据标签id获得标签对象 function getElement(id) {      return document.getElementById(id); }; //6.删除行,element-当前点击de function deleteRow(element) {      if (GlobalUpdateTr != null ) { //判断当前是否修改状态          rollBack(GlobalUpdateTr);      };      if (!confirm( "确定删除吗？" )) { //确认是否要移除          return ;      };      var delTr = element.parentNode.parentNode; //获取删除行      delTr.parentNode.removeChild(delTr); //移除行      arrDetailData.deleteById(delTr.childNodes[0].innerHTML); //删除对应的数组元素 }; //7.修改行 //7-1.定义全局变量,三个文本框一个下拉列表，一个存储修改行的变量GlobalUpdateTr，标记修改状态 var inputPersonName = document.createElement( "input" ); //捐赠人名称 inputPersonName.type = "text" ; var inputMoney = document.createElement( "input" ); //捐赠金额 inputMoney.type = "text" ; var inputTime = document.createElement( "input" ); //捐赠时间 inputTime.type = "text" ; var selectOrg = document.createElement( "select" ); //受捐单位下拉列表 var GlobalUpdateTr = null ; //存储修改行，标记是否修改状态 //7.2.设置当前行，为修改状态,obj-当前点击对象 function setUpdateState(element) {      if (GlobalUpdateTr != null ) { //判断是否已经在修改状态          rollBack(GlobalUpdateTr); //还原      };      GlobalUpdateTr = element.parentNode.parentNode; //获得当前修改行      txtToInput(GlobalUpdateTr.childNodes[1], inputPersonName);      txtToInput(GlobalUpdateTr.childNodes[3], inputMoney);      txtToInput(GlobalUpdateTr.childNodes[4], inputTime);      txtToSelect(GlobalUpdateTr.childNodes[2], selectOrg);      GlobalUpdateTr.childNodes[5].innerHTML = "<a href='#' onclick='update(this)'>确定</a>&nbsp;&nbsp;<a href='#' onclick='exitUpdateState(this)'>取消</a>" ; //设置操作列 }; //7-2-1.当前行设置为修改状态（文本设为文本框）(td:列，element:文本框) function txtToInput(td,element) {      element.value = td.innerHTML; //设置obj的值      td.setAttribute( "oldValue" ,td.innerHTML); //保存td的文本值，取消修改时要取的值      td.appendChild(element); //往列td添加obj      if (td.childNodes[1]) { //判断是否有文本节点          td.removeChild(td.childNodes[0]); //移除td的文本节点      }; }; //7-2-2.当前行设置为修改状态（文本设为下拉列）(td:列，element:下拉列) function txtToSelect(td, element) {      td.appendChild(element);      td.removeChild(td.childNodes[0]);      element.value = td.getAttribute( "OrgId" ); }; //7-3.取消修改，恢复界面，退出修改操作状态,element-当前点击对象 function exitUpdateState(element) {      var cancelTr = element.parentNode.parentNode; //取得当前行      rollBack(cancelTr);      //退出修改状态      GlobalUpdateTr = null ; }; //还原,obj-当前修改行/之前的修改行 function rollBack(element) {      element.childNodes[1].innerHTML = element.childNodes[1].getAttribute( "oldValue" ); //恢复原来的文本值(名称)      element.childNodes[3].innerHTML = element.childNodes[3].getAttribute( "oldValue" ); //恢复原来的文本值(金额)      element.childNodes[4].innerHTML = element.childNodes[4].getAttribute( "oldValue" ); //恢复原来的文本值(日期)      element.childNodes[2].removeChild(selectOrg); //移除下拉列      var orgId = element.childNodes[2].getAttribute( "OrgId" ); //取得捐赠单位id      element.childNodes[2].innerHTML = arrOrgData.getOrgById(orgId).OrgName; //恢复原来的文本值（捐赠单位）      element.childNodes[5].innerHTML = "<a href='#' onclick='setUpdateState(this)'>修改</a>&nbsp;&nbsp;<a href='#' onclick='deleteRow(this)'>删除</a>" ; //恢复操作列 }; //7-4.确定修改，更新界面，更新数据，修改完毕退出修改状态,element-当前点击对象 function update(element) {      var updateTr = element.parentNode.parentNode; //取得当前行      //更新界面      updateTr.childNodes[1].innerHTML = inputPersonName.value;      updateTr.childNodes[3].innerHTML = inputMoney.value;      updateTr.childNodes[4].innerHTML = inputTime.value;      updateTr.childNodes[2].removeChild(selectOrg);      updateTr.childNodes[2].innerHTML = arrOrgData.getOrgById(selectOrg.value).OrgName;      updateTr.childNodes[2].setAttribute( "OrgId" , selectOrg.value); //更新OrgId      updateTr.childNodes[5].innerHTML = "<a href='#' onclick='setUpdateState(this)'>修改</a>&nbsp;&nbsp;<a href='#' onclick='deleteRow(this)'>删除</a>" ; //恢复操作列      //更新数据      //下拉列表的value值就是下拉列表当前选项的value值      var model = { "Id" : updateTr.childNodes[0].innerHTML, "Name" : inputPersonName.value, "OrgId" : selectOrg.value, "Money" : inputMoney.value, "Time" : inputTime.value }; //创建与当前行数据对应的对象      arrDetailData.update(model); //更新数组      //退出修改状态      GlobalUpdateTr = null ; }; //-------窗口加载完毕触发--------// window.onload = function () {      //1.加载arrOrgData（to下拉列）      loadOrgData(getElement( "selSearchOrg" ));      loadOrgData(getElement( "selAddOrg" ));      loadOrgData(selectOrg);      //2.加载arrDetailData（to表）      loadDetailData();      //3.新增      getElement( "btnAdd" ).onclick = function () {          var model = { "Name" : getElement( "txtName" ).value, "OrgId" : getElement( "selAddOrg" ).value, "Money" : getElement( "txtMoney" ).value, "Time" : getElement( "txtDate" ).value }; //创建一个新数组元素对象          model = arrDetailData.addModel(model); //返回新增的元素          addTr(model); //插入新行到表显示      };      //4.查询（先删除当前界面所有行，再添加）      getElement( "btnSearch" ).onclick = function () {          var tbList = getElement( "tbList" ); //获得表          for ( var i = tbList.rows.length - 1; i >= 1; i--) { //遍历删除表的行，从末端开始              tbList.deleteRow(i); //删除一行          }          var searchId = getElement( "selSearchOrg" ).value; //要查询的捐赠单位id          var arrSearchData = arrDetailData.getSearchData(searchId); //得到查询数据          loadDataToTb(arrSearchData); //(加载)显示查询数据      };      //5.分页（先删除当前界面所有行，再添加）      //5-1.下一页      getElement( "btnnextPage" ).onclick = function () {          if (arrDetailData.length == 0) {              alert( "没有数据" );          };          //获取总页数          arrDetailData.pages = arrDetailData.length % arrDetailData.pageCount != 0 ? (arrDetailData.length - arrDetailData.length % arrDetailData.pageCount) / arrDetailData.pageCount + 1 : arrDetailData.length / arrDetailData.pageCount;          if (arrDetailData.pageIndex == arrDetailData.pages) { //判断是否最后一页              alert( "最后一页啦" );              return ; //返回          };          var tbList = getElement( "tbList" ); //获得表对象          for ( var  i= tbList.rows.length-1;i>=1; i--) { //删除表所有行              tbList.deleteRow(i);          }          arrDetailData.pageIndex++; //页码++,取得下一页          var arrPage = arrDetailData.getPageData(); //获得一页数据          loadDataToTb(arrPage); //加载显示到表      };      //5-2.上一页      getElement( "btnprePage" ).onclick = function () {          if (arrDetailData.length == 0) {              alert( "没有数据" );          };          //获取总页数          arrDetailData.pages = arrDetailData.length % arrDetailData.pageCount != 0 ? (arrDetailData.length - arrDetailData.length % arrDetailData.pageCount) / arrDetailData.pageCount + 1 : arrDetailData.length / arrDetailData.pageCount;          if (arrDetailData.pageIndex==1){ //判断是否第一页              alert( "这个第一页" );              return ;          };          var tbList = getElement( "tbList" ); //获得表对象          for ( var i = tbList.rows.length - 1; i >= 1; i--) { //删除表所有行              tbList.deleteRow(i);          }          arrDetailData.pageIndex--; //页码--，取得上一页          var arrPage = arrDetailData.getPageData(); //获得一页数据          loadDataToTb(arrPage); //加载显示到表      }; };

[2].[文件] orgManage.rar ~ 10KB    下载(102) 跳至 [1] [2] [3]

文件不存在或者代码语言不存在

[3].[图片] QQ截图20130710140338.jpg 跳至 [1] [2] [3]