最新消息:最新信息可以到系统基本设置里填写,如果不想要这一栏可以修改head.htm,将第53行到55行删除即可

jQuery之jQuery扩展和事件

创意新鲜 dedesos.com

三、表格的添加 | 删除 | 编辑示例

第一种:点击编辑没有模态框,是input框编辑修改

 1 !DOCTYPE html 
 2 html lang="en" 
 3 head 
 4 meta charset="UTF-8" 
 5 title 增删改 /title 
 6 link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" 
 7 style 
 8 .addBtn {
 9 margin-top: 30px;
 10 margin-bottom: 15px;
 11 }
 12 /style 
 13 /head 
 14 body 
 15 div 
 16 div 
 17 div 
 18 !-- Button trigger modal -- 
 19 button type="button" data-toggle="modal" data-target="#myModal" 
 20 添加学生的信息
 21 /button 
 22 table 
 23 tbody 
 24 tr 
 25 th 姓名 /th 
 26 th 年龄 /th 
 27 th 性别 /th 
 28 th 操作 /th 
 29 /tr 
 30 tr 
 31 td 六点 /td 
 32 td 23 /td 
 33 td 女 /td 
 34 td 
 35 button 编辑 /button 
 36 button 删除 /button 
 37 /td 
 38 /tr 
 39 tr 
 40 td 时时彩 /td 
 41 td 24 /td 
 42 td 女 /td 
 43 td 
 44 button 编辑 /button 
 45 button 删除 /button 
 46 /td 
 47 /tr 
 48 tr 
 49 td 刚强 /td 
 50 td 13 /td 
 51 td 男 /td 
 52 td 
 53 button 编辑 /button 
 54 button 删除 /button 
 55 /td 
 56 /tr 
 57 /tbody 
 58 /table 
 59 /div 
 60 /div 
 61 /div 
 64 !-- Modal模态框 -- 
 65 div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 
 66 div role="document" 
 67 div 
 68 div 
 69 button type="button" data-dismiss="modal" aria-label="Close" span aria-hidden="true" times; /span 
 70 /button 
 71 h4 id="myModalLabel" Modal title /h4 
 72 /div 
 73 div 
 74 form 
 75 div 
 76 label for="username" 姓名 /label 
 77 input type="text" id="username" placeholder="username" 
 78 /div 
 79 div 
 80 label for="age" 年龄 /label 
 81 input type="text" id="age" placeholder="age" 
 82 /div 
 83 div 
 84 label for="gender" 性别 /label 
 85 input type="text" id="gender" placeholder="gender" 
 86 /div 
 87 /form 
 88 /div 
 89 div 
 90 button type="button" data-dismiss="modal" Close /button 
 91 button type="button" 确定 /button 
 92 /div 
 93 /div 
 94 /div 
 95 /div 
 96 script src="jquery-3.2.1.min.js" /script 
 97 script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" /script 
 98 script 
 99 //添加信息
100 $.on {
101 arr=[];
102 $.each {
103 // console.log.val) //返回的是input框里面输入的内容
104 var ele_v = $.val;
105 arr.push; //吧拿到的值添加到数组
106 });
107 var s =' tr td '+arr[0]+' /td td '+arr[1]+' /td td '+arr[2]+' /td td button 编辑 /button button 删除 /button /td /tr ';
108 $.append;
109 $.modal
110 });
112 //删除信息
113 // 方式一
114 $.on { //事件委派
115 if {
116 //找到要删除的行
117 // console.log;
118 e.target.parentElement.parentElement.remove
119 }
120 });
122 // 方式二
123 $.on { //事件委派
124 $.parent.parent.remove //这里的
125 });
127 //编辑信息
129 $.on {
130 var tds = $.parent.prevAll;
131 tds.each {
132 $.html.text+ ' ')
133 });
135 $.text;
136 $.removeClass;
137 $.addClass
138 });
140 $.on {
141 var tds = $.parent.prevAll;
142 console.log;
143 tds.each{
144 // $.text;
145 $.text.children.first.val);
146 console.log
147 });
148 $.text;
149 $.removeClass;
150 $.addClass;
151 });
154 /script 
155 /body 
156 /html 

第二种:点击编辑有模态框

 1 !DOCTYPE html 
 2 !-- saved from url=http://v3.bootcss.com/examples/dashboard/ -- 
 3 html lang="zh-CN" 
 4 head 
 5 meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
 7 meta http-equiv="X-UA-Compatible" content="IE=edge" 
 8 meta name="viewport" content="width=device-width, initial-scale=1" 
 9 !-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -- 
 10 meta name="description" content="" 
 11 meta name="author" content="" 
 12 link rel="icon" href="http://v3.bootcss.com/favicon.ico" 
 14 title Dashboard Template for Bootstrap /title 
 16 !-- Bootstrap core CSS -- 
 17 link href="./Dashboard_files/bootstrap.min.css" rel="stylesheet" 
 19 !-- IE10 viewport hack for Surface/desktop Windows 8 bug -- 
 20 link href="./Dashboard_files/ie10-viewport-bug-workaround.css" rel="stylesheet" 
 22 !-- Custom styles for this template -- 
 23 link href="./Dashboard_files/dashboard.css" rel="stylesheet" 
 25 !-- Just for debugging purposes. Don't actually copy these 2 lines! -- 
 26 !--[if lt IE 9] 
 27 script src="../../assets/js/ie8-responsive-file-warning.js" /script ![endif]-- 
 28 script src="Dashboard_files/ie-emulation-modes-warning.js" /script 
 30 !-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -- 
 31 !--[if lt IE 9] 
 32 //cdn导入css样式
 33 script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js" /script 
 34 script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js" /script 
 35 ![endif]
 36 !-- link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" -- 
 39 style 
 40 .menu {
 41 margin: 0 -20px;
 42 border-bottom: 1px solid #336699;
 43 }
 45 .head {
 46 padding: 15px;
 47 }
 49 .my-table-tool {
 50 margin-bottom: 15px;
 51 }
 53 .menu .nav-sidebar li a {
 54 padding-right: 40px;
 55 padding-left: 40px;
 56 }
 57 /style 
 59 /head 
 61 body 
 63 nav 
 64 div 
 65 div 
 66 button type="button" data-toggle="collapse" data-target="#navbar"
 67 aria-expanded="false" aria-controls="navbar" 
 68 span Toggle navigation /span 
 69 span /span 
 70 span /span 
 71 span /span 
 72 /button 
 73 a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html" Project name /a 
 74 /div 
 75 div id="navbar" 
 76 ul 
 77 li a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html" Dashboard /a /li 
 78 li a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html" Settings /a /li 
 79 li a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html" Profile /a /li 
 80 li a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html" Help /a /li 
 81 /ul 
 82 form 
 83 input type="text" placeholder="Search..." 
 84 /form 
 85 /div 
 86 /div 
 87 /nav 
 88 !--左侧菜单-- 
 89 div 
 90 div 
 91 div 
 93 div 
 94 div 菜单一 /div 
 95 ul 
 96 li class="" a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html" Overview span
 97  /span /a 
 98 /li 
 99 li a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html" Reports /a /li 
100 li a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html" Analytics /a /li 
101 li a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html" Export /a /li 
102 /ul 
103 /div 
105 div 
106 div 菜单二 /div 
107 ul 
108 li a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html" Nav item /a /li 
109 li a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html" Nav item again /a /li 
110 li a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html" One more nav /a /li 
111 li a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html" Another nav item /a /li 
112 li a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html" More navigation /a /li 
113 /ul 
114 /div 
116 div 
117 div 菜单三 /div 
118 ul 
119 li a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html" Nav item again /a /li 
120 li a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html" One more nav /a /li 
121 li a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html" Another nav item /a /li 
122 /ul 
123 /div 
124 /div 
125 /div 
126 /div 
127 !--表格-- 
128 div 
129 div 
130 div 
131 !-- Button trigger modal -- 
132 button type="button" data-toggle="modal" data-target="#myModal" 
133 添加学生的信息
134 /button 
135 table 
136 thead 
137 tr 
138 th 学号 /th 
139 th 姓名 /th 
140 th 年龄 /th 
141 th 性别 /th 
142 th 操作 /th 
143 /tr 
144 /thead 
145 tbody 
146 tr 
147 td 1 /td 
148 td 李欣 /td 
149 td 23 /td 
150 td 女 /td 
151 td 
152 button 编辑 /button 
153 button 删除 /button 
154 /td 
155 /tr 
156 tr 
157 td 2 /td 
158 td 时时彩 /td 
159 td 24 /td 
160 td 女 /td 
161 td 
162 button 编辑 /button 
163 button 删除 /button 
164 /td 
165 /tr 
166 tr 
167 td 3 /td 
168 td 刚强 /td 
169 td 13 /td 
170 td 男 /td 
171 td 
172 button 编辑 /button 
173 button 删除 /button 
174 /td 
175 /tr 
176 tr 
177 td 4 /td 
178 td 杜康 /td 
179 td 25 /td 
180 td 男 /td 
181 td 
182 button 编辑 /button 
183 button 删除 /button 
184 /td 
185 /tr 
186 /tbody 
187 /table 
188 /div 
189 /div 
190 /div 
191 !--模态框-- 
192 div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 
193 div role="document" 
194 div 
195 div 
196 button type="button" data-dismiss="modal" aria-label="Close" span aria-hidden="true" times; /span 
197 /button 
198 h4 id="myModalLabel" 学生信息 /h4 
199 /div 
200 div 
201 form 
202 div 
203 label for="modal-username" 姓名 /label 
204 input type="text" id="modal-username" placeholder="username" 
205 /div 
206 div 
207 label for="modal-age" 年龄 /label 
208 input type="text" id="modal-age" placeholder="age" 
209 /div 
210 div 
211 label for="modal-gender" 性别 /label 
212 input type="text" id="modal-gender" placeholder="gender" 
213 /div 
214 /form 
215 /div 
216 div 
217 button type="button" data-dismiss="modal" 关闭 /button 
218 button type="button" 确定 /button 
219 /div 
220 /div 
221 /div 
222 /div 
223 !-- Bootstrap core JavaScript
224 ================================================== -- 
225 script src="jquery-3.2.1.min.js" /script 
226 !-- Placed at the end of the document so the pages load faster -- 
227 !-- script src="Dashboard_files/jquery.min.js" /script -- 
228 !-- script window.jQuery || document.write /script -- 
229 !-- script src="Dashboard_files/bootstrap.min.js" /script -- 
230 !-- Just to make our placeholder images work. Don't actually copy the next line! -- 
231 script src="Dashboard_files/holder.min.js" /script 
232 !-- IE10 viewport hack for Surface/desktop Windows 8 bug -- 
233 script src="Dashboard_files/ie10-viewport-bug-workaround.js" /script 
235 script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" /script 
236 script 
237 //左侧菜单
238 $.on {
239 // 兄弟标签 紧挨着的ul标签 隐藏 addClass
240 $.parent.siblings.children.slideUp;
241 // 把自己 紧挨着的ul标签显示 removeClass
242 // $.next.removeClass;
243 $.next.slideToggle;
244 });
246 //删除按钮
247 $.on {
248 $.parent.parent.remove
249 });
250 //编辑
251 $.on {//事件委派
252 //弹出模态框
253 //alert
254 $.modal;
255 //给模态框赋值
256 //1、先取值
257 var tds = $.parent.parent.children;
258 var username = tds.eq.text;
259 var age = tds.eq.text;
260 var danger = tds.eq.text;
261 //2、后赋值
262 $.val;
263 $.val;
264 $.val;
265 //吧tds保存到myModal的data
266 $.data;
267 console.log;
268 // console.log.data);
269 });
270 //点击模态框中的确定按钮,增加事件
271 $.on {
272 //1、隐藏模态框
273 $.modal;
274 //2、更新td的值0
275 //取值
276 var username = $.val;
277 var age = $.val;
278 var denger = $.val;
279 // 赋值
280 //拿到你点击的哪一行
281 var tds = $.data;
282 console.log;
283 if  {
284 //因为添加和编辑共用一个模态框,所以先分开判断一下
285 //当tds在模态框中没有值的时候,就实现添加的功能,如果有数据,就做编辑的功能
286 var tr1 = document.createElement;
287 //第一个是td的序号
288 $.append.length+1 + " /td 
289 console.log.length);
290 // 第二个是username
291 $.append.append;
293 $.append;
294 // 最后加按钮
295 //
296 var s = $.find.last;
297 var ss = s.clone;
298 $.append;
299 $.append;
300 } else {
301 console.log; //这里的tds就是上面用data保存下来的每一列里面的内容
302 tds.eq.text;
303 tds.eq.text;
304 tds.eq.text;
305 $.removeData
306 }
307 });
308 //给添加按钮增加事件
309 $.on {
310 //当点击添加按钮的时候把模态框里面的..内容清空
311 $.val;
312 });
313 /script 
314 /body 
315 /html 

 补充一个知识点 data

- .data
- .data 保存值,value可以是字符串,也可以是数组,也可以是jquery对象
- .data 获取值
- .removeData 删除所有

- .removeData 删除key对应的value






 

 

一、jQuery事件

常用事件
blur 失去焦点
focus 获取焦点
change 当select下拉框中的元素发生改变的时候触发change事件
click 点击
dblclick 双击
scroll 滚动
submit 提交

不常用事件
error
focusin
focusout
keydown 按下
keypress 按键
keyup 键松开
mousedown 鼠标按下
mouseenter 鼠标移进去
mouseleave 鼠标离开:只有鼠标离开被选元素的时候,才会触发mouseleave事件
mousemove 鼠标移动
mouseout 鼠标离开:无论鼠标离开被选元素还是任何子元素,都会触发mouseout事件
mouseover 鼠标弹起
resize 元素窗口发生变化
select
unload
补充:
文档树加载完之后绑定事件
第一种:吧script放在后面。
第二种:
$.ready{
// 绑定事件的代码
....
})

简写:
${
// 绑定事件的代码
....
});
事件练习








































 1 !DOCTYPE html 
 2 html lang="en" 
 3 head 
 4 meta charset="UTF-8" 
 5 title 常用事件 /title 
 6 /head 
 7 body 
 8 input type="text" name="search" value="苹果手机" data-show ="" 
 9 button 搜索 /button 
10 select name="" id="s1" 
11 option value="gansu" 甘肃 /option 
12 option value="wuwei" 武威 /option 
13 option value="dingxi" 定西 /option 
14 option value="longxi" 陇西 /option 
15 option value="dalian" 大连 /option 
16 /select 
17 script src="jquery-3.2.1.min.js" /script 
18 script 
19 // focus和blur事件
20 $.ready {
21 //文档加载完之后执行下面的代码
22 $.focus {
23 var data = $.val;
24 $.val;
25 $.attr;
27 });
28 $.blur {
29 $.val.attr);
30 });
31 $.change {
32 // 当你的下拉框改变的时候就触发这个事件,就会执行下面的代码
33 console.log.val)
34 })
35 });
37 /script 
38 /body 
39 /html 

    与本文相关的文章

    网友最新评论