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);
//加载显示到表
};
};
|
智能推荐
在VUE框架的WEB网页端播放海康威视RTSP视频流完全方案_vue liveweb-程序员宅基地
文章浏览阅读2.5k次。此方案同样需要服务器的支持，由于在终端电脑转码，终端电脑配置好坏决定了播放质量，并且由于WASM只能软解码，无法利用终端电脑的加速能力，且不支持多线程，不支持水印、字幕及本地录像及抓图等，多路播放或者H.265格式视频，也容易出现卡顿、花屏等情况，大量占用电脑CPU和内存，电脑无法再做其他事情，体验非常不好。此方案首屏画面显示很慢。liveweb是一款超低延时(150-200毫秒)、秒启动、无插件web实时视频播放器，h5视频播放器，支持egde、firefox、Chrome、safari等常见浏览器。_vue liveweb
Qt打开文件夹选择文件、获取文件名、路径名、打开多个文件_vs+qt选择打开文件夹-程序员宅基地
文章浏览阅读9.6k次，点赞2次，收藏10次。在用Qt进行客户端开发时经常有打开目录选择文件的需求，本篇博客介绍Qt打开文件夹选择文件，获取文件名，获取文件路径，打开多个文件等方法。基本都是用QFileDialog类的方法，使用时需要包含头文件： #include <QFileDialog>1. 获取选择的文件夹路径 会用到..._vs+qt选择打开文件夹
【OpenCV 例程200篇】42. 图像的灰度变换（比特平面分层）_opencv bit-pane slicing-程序员宅基地
文章浏览阅读2.6k次，点赞9次，收藏13次。像素值也可以表示为二进制形式，对 8bits 二进制数的每一位进行切片，可以得到 8 个比特平面，称为比特平面分层（Bit-plane slicing）。高阶比特平面包含了大量有视觉意义的数据，而低阶比特平面包含了更精细的灰度细节。因此，比特平面分层可以用于图像压缩和图像重建。..._opencv bit-pane slicing
Linux CentOS 开启root用户远程登录_centos root远程登录-程序员宅基地
文章浏览阅读1.5w次，点赞5次，收藏18次。Linux CentOS 开启root远程登录1、设置root密码2、开启root远程登录为了安全起见，root用户默认是没有密码的，且不许登录。1、设置root密码如果root未设置过密码，先以普通账号登录，然后输入以下命令来修改root密码：sudo passwd root2、开启root远程登录1)先以普通账号登录，然后输入以下命令来切换登录root：su2)修改ssh..._centos root远程登录
移动端适配方案_lib-flexible 华为适配问题-程序员宅基地
文章浏览阅读491次。移动端适配方案前言我认识的很多前端的初学者停留在PC端页面的阶段，但其实移动端开发也是非常重要的一个模块。而在移动端开发中最需要我们注意的，就是适配问题。这篇文章对完全没有接触过移动端开发的小伙伴也比较友好，我们从源头开始，让没有接触过移动端的小伙伴先有一个宏观上的认知，然后我们再细致的聊聊移动端适配的那些事儿（文章比较长，大家可以分阶段食用）。何为移动端开发大家最开始学习前端，一定是从PC端页面做起的，同样的道理，移动端无非就是把PC端的网页搬到手机上而已，通常我们把这样的项目叫做app（手动尴尬_lib-flexible 华为适配问题
Linux笔记-ubuntu16.04磁盘分区和挂载_ubuntu special device does not exist-程序员宅基地
文章浏览阅读4.1k次。1、检查磁盘和分区情况lsblk查看整体分区和磁盘情况fdisk -l能够查看到当前主机上已连接上的磁盘df -h能够查看到分区已经挂载的磁盘。2、磁盘分区、格式化：fdisk /dev/sdb根据帮助新建分区注意：最后输入w，保存更改并推出fdisk -l找到物理磁盘devvdb下创建的分区。mkfs.ext4 /dev/sdb2格式化上述找到的分区。3、挂载磁盘：mkdir /datamoun..._ubuntu special device does not exist
随便推点
DHCP中继代理配置案例2（eNSP）_华为交换机dhcp中继配置案例-程序员宅基地
文章浏览阅读1.1k次，点赞33次，收藏17次。本案例利用华为eNSP模拟器，由AC作DHCP服务器，三层交换机做DHCP中继代理，为网络中的AP和无线网络中的STA分配IP地址。_华为交换机dhcp中继配置案例
Python学习笔记-Python的字符串，格式化，条件判断，循环、raw_input的注意事项_python,raw_input的值能做为循环条件吗-程序员宅基地
文章浏览阅读2.9k次，点赞3次，收藏3次。因为Python的诞生比Unicode标准发布的时间还要早，所以最早的Python只支持ASCII编码，普通的字符串'ABC'在Python内部都是ASCII编码的。Python提供了ord()和chr()函数，可以把字母和对应的数字相互转换：>>> ord('A')65>>> chr(65)'A'Python在后来添加了对Unicode的支持，以Unicode表示的字符串用u'...'表示，_python,raw_input的值能做为循环条件吗
正点原子stm32F407学习笔记6——外部中断实验_stm32f407外部中断引脚-程序员宅基地
文章浏览阅读1.9k次，点赞5次，收藏16次。这样每个中断线对应了最多 9 个 IO 口，以线 0 为例：它对应了 GPIOA.0、GPIOB.0、GPIOC.0、GPIOD.0、GPIOE.0、GPIOF.0、GPIOG.0,GPIOH.0,GPIOI.0。编译后报错，提示关于EXIT类函数未定义，这是因为在GPIO那一章节编译全部库文件比较慢把不相关的库文件从工程中删除了，所以操作找不到相关库函数。设置好中断后，当按键按下有上升下降沿时触发中断，进入中断服务函数，判断中断标志位，延时10Ms去抖动，再判断是否是高低电平执行相关操作。_stm32f407外部中断引脚
C/C++课程综合项目任务文档[2023-12-12]-程序员宅基地
文章浏览阅读387次，点赞9次，收藏9次。2、最后提交: 每周工作安排表、项目分析报告( word ) 以及系统程序代码要求将数据结构的定义、基本操作的原型声明及实现封装在相应.h 文件中，在源文件.cpp 中进行调用。2)查找: 用动态查找(如二又排序树、平衡二又树)或哈希查找，也可以折半+二又排序数、或哈希+二叉树排序树、哈希+折半等3)排序·快速排序二路归并排序，堆排序等。说明:不可以直接调用现有的类型、STL容器，用到的数据结构对应的数据类型要自己定义实现，利用平时课堂实验中已实现的拿来修改。线性结构:线性表、栈、队列(至少一种)
Android本地缓存getCacheDir()与getFilesDir(0_android getcachedir和getfilesdir-程序员宅基地
文章浏览阅读456次。1.getCacheDir()方法用于获取/data/data//cache目录2.getFilesDir()方法用于获取/data/data//files目录**应用程序在运行的过程中如果需要向手机上保存数据，一般是把数据保存在SDcard中的。大部分应用是直接在SDCard的根目录下创建一个文件夹，然后把数据保存在该文件夹中。这样当该应用被卸载后，这些数据还保留在SDCard中，留下了垃圾数_android getcachedir和getfilesdir
基于内容的推荐算法_内容推荐算法-程序员宅基地
文章浏览阅读4.1k次，点赞8次，收藏62次。文章目录什么是基于内容的推荐算法基于内容的推荐算法实现原理1. 基于用户和标的物特征为用户推荐的核心思想2. 构建用户特征表示3. 构建标的物特征表示（4）图片、音频、或者视频信息4. 为用户做个性化推荐（1）采用跟基于物品的协同过滤类似的方式推荐什么是基于内容的推荐算法首先我们给基于内容的推荐算法下一个定义，让读者有初步的印象，后面更容易理解我们讲的基于内容的推荐算法。所谓基于内容的推荐算法(Content-Based Recommendations)是基于标的物相关信息、用户相关信息及用户_内容推荐算法