javaScript实现增删改查_js 实现查询修改-程序员宅基地
技术标签： Java-Web
[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> <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> <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> <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> <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);
//加载显示到表
};
};
|
智能推荐
google vr 入门之制作简易的VR播放器(三)，android学生管理系统项目视频_自己的android app中集成vr浏览器-程序员宅基地
文章浏览阅读192次。// 使用google vr 添加的compile ‘com.google.vr:sdk-base:1.40.0’compile ‘com.google.vr:sdk-audio:1.40.0’compile ‘com.google.vr:sdk-videowidget:1.40.0’添加这些依赖包之后google给我们的生成了哪些library库呢?![](https://img-blog.csdn.net/20170427162756208?watermark/2/text/aHR0cDovL_自己的android app中集成vr浏览器
db和dbm_it dbm-程序员宅基地
文章浏览阅读1.8k次。DB :DB是一个纯计数单位：dB = 10logX。dB的意义其实再简单不过了，就是把一个很大（后面跟一长串0的）或者很小（前面有一长串0的）的数比较简短地表示出来。如：X = 1000000000000000（多少个了？）= 10logX = 150 dB X = 0.000000000000001 = 10logX = -150 dB DB在缺省情况下总是定义功率单位，以 1_it dbm
芯片验证从零开始系列（一）——芯片验证概论-程序员宅基地
文章浏览阅读1w次，点赞7次，收藏78次。芯片验证从零开始系列（一）——芯片验证概论芯片开发流程动态验证技术静态验证技术Emulation和FPGA原型开发由于最近一个比赛要用到UVM验证，顺便多一门以后求职的手艺，准备系统地学习一下SV和UVM，也可以为之后的毕业论文和发展方向做一些准备。芯片开发流程1）市场人员和客户沟通确定用户需求2）系统设计人员按照功能划分为各个子系统3）子系统由设计团队开发实现4）验证人员对设计功能展开验证，发现设计缺陷，交由设计人员修正5）验证没有出现漏洞后，交由后端人员进行综合，布局布线6）后端人员将_芯片验证
RabbitMQ详解（一）：RabbitMQ相关概念_obpmq-程序员宅基地
文章浏览阅读8.9k次，点赞24次，收藏26次。RabbitMQ是目前非常热门的一款消息中间件，不管是互联网大厂还是中小企业都在大量使用。作为一名合格的开发者，有必要对RabbitMQ有所了解，本系列是RabbitMQ快速入门文章，主要内容包括RabbitMQ是什么、RabbitMQ核心概念、五种消息模型、用Docker安装RabbitMQ等。_obpmq
HTML 网页自动刷新_html多线程刷新网页-程序员宅基地
文章浏览阅读5.2k次，点赞2次，收藏24次。HTML网页自动刷新方法在进行HTML网页编写的过程中，往往需要及时的编写反馈，反复的在编辑器和浏览器窗之间进行切换是一个很繁琐的事情，如果在编辑器上使用插件，我也不太愿意，繁琐而且不安全。下面介绍三种不需要插件的自动刷新方法。第一种使用meta标签在html的文档头中,在<head>标签中添加meta属性，像下面“ <meta http-equiv="refresh" content="10">其中前面是刷新所需的meta标识,后面的content是刷新的秒数。第二_html多线程刷新网页
使用@EventListener注解，只启动一次监听事件_@eventlistener 被启动了2次-程序员宅基地
文章浏览阅读726次。背景：当在写一个Spring项目时，配置了事件监听器，在项目启动的时候会自己启动一次，之后如果再调用Controller接口的时候，他还会自己再启动，这个时候我们的业务场景只需要启动一次该怎么办呢？解答： @EventListener public void listener1(ApplicationEvent event) { //解决controller调用接口的时候多次启动event实例 ContextRefreshedEvent event1 = _@eventlistener 被启动了2次
随便推点
Halcon 3D定位方法-程序员宅基地
文章浏览阅读1.9k次。Descriptor-based Matchinguncalibrated mathcing return perspective map,calibrated matching return pose.find_calib_descriptor_model()Deformable MatchingFind objects with perspective distort..._halcon 3d定位
用 Hadoop 进行分布式并行编程, 第 3 部分_hdfs dfs -copyfromlocal /home/hadoop/temp/* /tempd-程序员宅基地
文章浏览阅读706次。Hadoop 是一个实现了 MapReduce 计算模型的开源分布式并行编程框架,借助于 Hadoop, 程序员可以轻松地编写分布式并行程序，将其运行于计算机集群上，完成海量数据的计算。在本文中，详细介绍了如何部署 Hadoop 分布式运行环境，如何让程序分布式运行于多台普通的计算机上，如何使用 IBM MapReduce Tools 轻松地将 MapReduce 程序部署到 Hadoop 分_hdfs dfs -copyfromlocal /home/hadoop/temp/* /tempdir
Linux进阶 apache服务器；虚拟主机_虚拟机安装开启httpd服务-程序员宅基地
文章浏览阅读309次。1.关闭防火墙systemctlstopfirewalld（暂时关闭，重启后恢复）修改前------将index.html改为hello.html。2.设置宽容模式setenforce0(暂时性设置)配置同一ip不同端口的虚拟主机访问apache服务器。(1)安装httpd（先挂载，用yum安装）(4)修改配置文件httpd.html。(3)创建文件hello.html。(2)启动httpd服务。(5)重启httpd服务。(5)重启httpd服务。(5)重启httpd服务。..._虚拟机安装开启httpd服务
软件测试随笔-程序员宅基地
文章浏览阅读73次。记录一些软件测试工作中的想法。1）软件测试岗位价值在IT行业里是比较低的，为了更好的体现自身价值，我认为软件测试从业者应该比业务更懂技术，比技术更懂业务。同时具备很好的沟通协调能力。让自己变成万能胶。2）软件测试体现价值的点：1.发现bug2.提供信心3.提供信息4.预防缺陷3）软件测试一定要考虑测试的覆盖率4）测试工作要体现测试技术，而不是测试工..._软件测试随笔
VB程序设计教程(第四版) 龚沛曾_龚沛曾vb.pdf-程序员宅基地
文章浏览阅读1.6w次，点赞17次，收藏47次。VB程序设计教程(第四版) 龚沛曾 课后习题答案目录第一章课后答案第二章课后答案第三章课后答案第四章课后答案第五章课后答案第六章课后答案第七章课后答案第八章课后答案....第一章课后答案1、简述Visual Basic的特点。答：(1)具有基于对象的可视化设计工具(2)事件驱动的编程机制(3)提供易学易用的应用程序集成开发环境(4..._龚沛曾vb.pdf
Matlab神经网络语音增强,基于BP神经网络的语音增强研究-程序员宅基地
文章浏览阅读452次。曰髯?分类号:论文编号:2丛坦丝旦生丛密级:公开贵州大学2009届硕士研究生学位论文基于即神经网络的语音增强研究学科专业:电路与系统研究方向:模式识别导师:刘宇红教授研究生:周元芬中国贵州’贵阳2009年5月摘要-5Abstract-6第一章绪言11.1引言11.2语音增强的意义与研究现状21.2.1语音增强的目的21.2.2语音增强的意义21.2.3国内外语音增强研究现状41.2.4语音增强的算..._基于神经网络的语音增强