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);
//加载显示到表
};
};
|
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
智能推荐
FTP命令字和返回码_ftp 登录返回230-程序员宅基地
文章浏览阅读3.5k次，点赞2次，收藏13次。为了从FTP服务器下载文件，需要要实现一个简单的FTP客户端。FTP（文件传输协议） 是 TCP/IP 协议组中的应用层协议。FTP协议使用字符串格式命令字，每条命令都是一行字符串，以“\r\n”结尾。客户端发送格式是：命令+空格+参数+"\r\n"的格式服务器返回格式是以：状态码+空格+提示字符串+"\r\n"的格式，代码只要解析状态码就可以了。读写文件需要登陆服务器，特殊用..._ftp 登录返回230
centos7安装rabbitmq3.6.5_centos7 安装rabbitmq3.6.5-程序员宅基地
文章浏览阅读648次。前提：systemctl stop firewalld 关闭防火墙关闭selinux查看getenforce临时关闭setenforce 0永久关闭sed-i'/SELINUX/s/enforcing/disabled/'/etc/selinux/configselinux的三种模式enforcing：强制模式，SELinux 运作中，且已经正确的开始限制..._centos7 安装rabbitmq3.6.5
idea导入android工程,idea怎样导入Android studio 项目？-程序员宅基地
文章浏览阅读5.8k次。满意答案s55f2avsx2017.09.05采纳率：46%等级：12已帮助：5646人新版Android Studio/IntelliJ IDEA可以直接导入eclipse项目,不再推荐使用eclipse导出gradle的方式2启动Android Studio/IntelliJ IDEA，选择 import project3选择eclipse 项目4选择 create project f..._android studio 项目导入idea 看不懂安卓项目
浅谈AI大模型技术：概念、发展和应用_ai大模型应用开发-程序员宅基地
文章浏览阅读860次，点赞2次，收藏6次。AI大模型技术已经在自然语言处理、计算机视觉、多模态交互等领域取得了显著的进展和成果，同时也引发了一系列新的挑战和问题，如数据质量、计算效率、知识可解释性、安全可靠性等。城市运维涉及到多个方面，如交通管理、环境监测、公共安全、社会治理等，它们需要处理和分析大量的多模态数据，如图像、视频、语音、文本等，并根据不同的场景和需求，提供合适的决策和响应。知识搜索有多种形式，如语义搜索、对话搜索、图像搜索、视频搜索等，它们可以根据用户的输入和意图，从海量的数据源中检索出最相关的信息，并以友好的方式呈现给用户。_ai大模型应用开发
非常详细的阻抗测试基础知识_阻抗实部和虚部-程序员宅基地
文章浏览阅读8.2k次，点赞12次，收藏121次。为什么要测量阻抗呢？阻抗能代表什么？阻抗测量的注意事项... ...很多人可能会带着一系列的问题来阅读本文。不管是数字电路工程师还是射频工程师，都在关注各类器件的阻抗，本文非常值得一读。全文13000多字，认真读完大概需要2小时。一、阻抗测试基本概念阻抗定义：阻抗是元器件或电路对周期的交流信号的总的反作用。AC 交流测试信号 (幅度和频率)。包括实部和虚部。图1 阻抗的定义阻抗是评测电路、元件以及制作元件材料的重要参数。那么什么是阻抗呢？让我们先来看一下阻抗的定义。首先阻抗是一个矢量。通常，阻抗是_阻抗实部和虚部
小学生python游戏编程arcade----基本知识1_arcade语言 like-程序员宅基地
文章浏览阅读955次。前面章节分享试用了pyzero,pygame但随着想增加更丰富的游戏内容，好多还要进行自己编写类，从今天开始解绍一个新的python游戏库arcade模块。通过此次的《连连看》游戏实现，让我对swing的相关知识有了进一步的了解，对java这门语言也有了比以前更深刻的认识。java的一些基本语法，比如数据类型、运算符、程序流程控制和数组等，理解更加透彻。java最核心的核心就是面向对象思想，对于这一个概念，终于悟到了一些。_arcade语言 like
随便推点
【增强版短视频去水印源码】去水印微信小程序+去水印软件源码_去水印机要增强版-程序员宅基地
文章浏览阅读1.1k次。源码简介与安装说明：2021增强版短视频去水印源码 去水印微信小程序源码网站 去水印软件源码安装环境（需要材料）：备案域名–服务器安装宝塔-安装 Nginx 或者 Apachephp5.6 以上-安装 sg11 插件小程序已自带解析接口，支持全网主流短视频平台，搭建好了就能用注：接口是公益的，那么多人用解析慢是肯定的，前段和后端源码已经打包，上传服务器之后在配置文件修改数据库密码。然后输入自己的域名，进入后台，创建小程序，输入自己的小程序配置即可安装说明：上传源码，修改data/_去水印机要增强版
verilog进阶语法-触发器原语_fdre #(.init(1'b0) // initial value of register (1-程序员宅基地
文章浏览阅读557次。1. 触发器是FPGA存储数据的基本单元2. 触发器作为时序逻辑的基本元件，官方提供了丰富的配置方式，以适应各种可能的应用场景。_fdre #(.init(1'b0) // initial value of register (1'b0 or 1'b1) ) fdce_osc (
嵌入式面试/笔试C相关总结_嵌入式面试笔试c语言知识点-程序员宅基地
文章浏览阅读560次。本该是不同编译器结果不同，但是尝试了g++ msvc都是先计算c，再计算b，最后得到a+b+c是经过赋值以后的b和c参与计算而不是6。由上表可知，将q复制到p数组可以表示为：*p++=*q++，*优先级高，先取到对应q数组的值，然后两个++都是在后面，该行运算完后执行++。在电脑端编译完后会分为text data bss三种，其中text为可执行程序，data为初始化过的ro+rw变量，bss为未初始化或初始化为0变量。_嵌入式面试笔试c语言知识点
57 Things I've Learned Founding 3 Tech Companies_mature-程序员宅基地
文章浏览阅读2.3k次。57 Things I've Learned Founding 3 Tech CompaniesJason Goldberg, Betashop | Oct. 29, 2010, 1:29 PMI’ve been founding andhelping run techn_mature
一个脚本搞定文件合并去重，大数据处理，可以合并几个G以上的文件_python 超大文本合并-程序员宅基地
文章浏览阅读1.9k次。问题：先讲下需求，有若干个文本文件（txt或者csv文件等），每行代表一条数据，现在希望能合并成 1 个文本文件，且需要去除重复行。分析：一向奉行简单原则，如无必要，绝不复杂。如果数据量不大，那么如下两条命令就可以搞定合并：cat a.txt >> new.txtcat b.txt >> new.txt……去重：cat new...._python 超大文本合并
支付宝小程序iOS端过渡页DFLoadingPageRootController分析_类似支付宝页面过度加载页-程序员宅基地
文章浏览阅读489次。这个过渡页是第一次打开小程序展示的，点击某个小程序前把手机的开发者->network link conditioner->enable & very bad network 就会在停在此页。比如《支付宝运动》这个小程序先看这个类的.h可以看到它继承于DTViewController点击左上角返回的方法- (void)back;#import "DTViewController.h"#import "APBaseLoadingV..._类似支付宝页面过度加载页