python第九十一天----第十六周作业
2024-06-04 10:28:01
实现功能: 1、非编辑模式 可以对每行进行选择，全选，取消，反选 ； 2、编辑模式 进入编辑模式时:如果行被选中，则被选中的行变为可编辑状态，未选中则不改变 退出编辑模式时:保存所有的行的修改并进入非编辑状态 单个勾选: 勾上时: 进入编辑状态去勾时: 保存所在行的修改进入非编辑状态 全选时: 所有行进入编辑状态取消是: 所有行保存修改进入非编辑状态反选时: 被选中的行 取消勾选 保存修改进入非编辑状态未被选中的行 进行勾选 进入编辑状态 批量上下线:按住CTRL键 点击上下线的下拉项,可以批量进行设置上下线 被选中的行进行统一的设置 3、添加主机可以添加主机
详细代码:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>编辑框功能</title>
6
7 <style type="text/css">
8 /*顶部菜单*/
9 .pag-head{ 10 position: fixed;
11 z-index: 7;
12 top: 0;
13 left: 0;
14 right: 0;
15 height: 48px;
16 width: 100%;
17 background: #005EA7;
18
19 }
20 .meun_top{ 21 height: 48px;
22 line-height: 48px;
23 width: 960px;
24 /*border: 1px solid red;*/
25 margin: 0 auto;
26 }
27 /*顶部菜单组*/
28 .meuns_top{ 29 text-decoration: none;
30 color: white;
31 padding: 0px 10px 0px 10px;
32 display: inline-block;
33 }
34 .meuns_top:hover{ 35 background-color: rgba(64,119,203,0.6);
36 }
37
38 .clear_div{ 39 clear: both;
40 }
41 /*顶部菜单结束*/
42
43
44 /*下方大框*/
45 .pag-cent{ 46 margin-top: 50px;
47
48 }
49
50
51 /*左侧菜单*/
52 .left-meun{ 53 z-index: 8;
54 position: fixed;
55 top: 50px;
56 left: 55px;
57 }
58 .meuns{ 59
60 background-color: #005EA7;
61 height: 45px;
62 width:150px;
63 color:white;
64 line-height: 45px;
65 text-align: center;
66 }
67 .meuns:hover{ 68 background-color: rgba(64,119,203,0.6);
69 }
70 .hide{ 71 display: none;
72 }
73 .content{ 74 margin-left: 65%;
75 }
76 .item{ 77 width:150px;
78 }
79 /*左侧菜单结束*/
80
81 /*下方右边内容块*/
82 .big-content{ 83 height: 1000px;
84 border: 1px solid green;
85 }
86
87 .content_right{ 88 margin: 0 auto;
89 height: 800px;
90 width: 960px;
91 border: 1px solid blueviolet;
92
93 }
94
95 .hosts{ 96 margin-left: 30px;
97 margin-top: 20px;
98 }
99 table{100 border-spacing: 1px;
101 margin-top: 8px;
102 }
103 /*遮罩层*/
104 .c1{105 position: fixed;
106 z-index: 9;
107 /*打开多层样式 fixed模式 定义层级为9*/
108 top:0;
109 right:0;
110 left:0;
111 bottom:0;
112 /*上面表示全覆盖*/
113 background-color: black;
114 /*上面为背景色 为黑 下面为透明度为50%*/
115 opacity: 0.5;
116 }
117 .c2{118 position: fixed;
119 z-index: 10;
120 /*打开多层样式 fixed模式 定义层级为9*/
121
122 width:400px;
123 height: 300px;
124 top:50%;
125 left:50%;
126 margin-left: -200px;
127 margin-top: -150px;
128 background-color: white;
129
130 }
131 .z-z{132 width: 230px;
133 height: 120px;
134 margin-top: 90px;
135 margin-left: 90px;
136 }
137
138 .error{139 color: red;
140 }
141 hr{142 width: 230px;
143 }
144 #cre{145 margin-left: 70px;
146 }
147 .heds{148 /*默认不显示*/
149 display: none;
150 }
151
152 .right-menu{153 width: 320px;
154 height: 30px;
155 line-height: 30px;
156 }
157 .edits{158 float: right;
159 border: 1px solid darkgray;
160 padding: 2px;
161 background-color: #A9A9A9;
162 font-size: 9px;
163 }
164 .edits-2{165 background-color: orange;
166 }
167
168 .option-ol{169
170 }
171 /*下方右边内容块结束*/
172
173
174 /*返回顶部*/
175 .pa-top{176 width: 68px;
177 height: 48px;
178 position: fixed;
179 right: 25px;
180 bottom: 25px;
181 background-image: url(img/top.png);
182 background-position: -425px -270px ;
183
184 }
185 </style>
186 </head>
187 <body style="margin: 0">
188 <!--顶部菜单-->
189 <div class="pag-head">
190 <div class="meun_top">
191 <a href="" class="meuns_top">顶部菜单一</a>
192 <a href="" class="meuns_top">顶部菜单二</a>
193 <a href="" class="meuns_top">顶部菜单三</a>
194 <a href="" class="meuns_top">顶部菜单四</a>
195 <a href="" class="meuns_top">顶部菜单五</a>
196 <a href="" class="meuns_top">顶部菜单六</a>
197 </div>
198 <div class="clear_div">
199
200 </div>
201
202 </div>
203 <!--下方大框-->
204 <div class="pag-cent">
205
206 <!--左边菜单-->
207 <div class="left-meun">
208 <div class="item">
209 <div id="i1" class="meuns">菜单1</div>
210 <div class="content">
211 <div>内容1</div>
212 <div>内容1</div>
213 <div>内容1</div>
214 <div>内容1</div>
215 </div>
216 </div>
217
218 <div class="item">
219 <div id="i2" class="meuns">菜单2</div>
220 <div class="content hide">
221 <div>内容2</div>
222 <div>内容2</div>
223 <div>内容2</div>
224 <div>内容2</div>
225 </div>
226 </div>
227
228 <div class="item">
229 <div id="i3" class="meuns">菜单3</div>
230 <div class="content hide">
231 <div>内容3</div>
232 <div>内容3</div>
233 <div>内容3</div>
234 <div>内容3</div>
235 </div>
236 </div>
237
238 <div class="item">
239 <div id="i4" class="meuns">菜单4</div>
240 <div class="content hide">
241 <div>内容4</div>
242 <div>内容4</div>
243 <div>内容4</div>
244 <div>内容4</div>
245
246 </div>
247
248 </div>
249
250 </div>
251
252
253
254 <!--右边内容-->
255 <div class="big-content">
256 <div class="content_right">
257 <div class="hosts">
258 <div class="right-menu">
259 <input type="button" id='add' value="添加" >
260 <input type="button" id="all" value="全选" >
261 <input type="button" id="remov" value="取消" >
262 <input type="button" id="rest" value="反选" >
263 <div class="edits" id="ed" name='none'>
264 点击：进入编辑模式
265 </div>
266 </div>
267
268 <table border="1" id="tab">
269 <thead>
270 <tr>
271 <th>选择</th>
272 <th>主机</th>
273 <th>端口</th>
274 <th>ip</th>
275 <th>操作</th>
276 </tr>
277 </thead>
278 <tbody id="tb">
279
280 <tr>
281 <td><input type="checkbox" as='true'></td>
282 <td tag='hostname'>主机一</td>
283 <td tag='port'>1000</td>
284 <td tag='ip'>10.10.12.1</td>
285 <td tag='olin'>
286 <select name="ol" class="heds">
287 <option value="在线">在线</option>
288 <option value="下线">下线</option>
289 </select>
290 <a>在线</a>
291 </td>
292 <tr>
293 <td><input type="checkbox" as='true'></td>
294 <td tag='hostname'>主机二</td>
295 <td tag='port'>1000</td>
296 <td tag='ip'>10.10.12.2</td>
297 <td tag='olin'>
298 <select name="ol" class="heds">
299 <option value="在线">在线</option>
300 <option value="下线">下线</option>
301 </select>
302 <a>下线</a>
303 </td>
304 </tr>
305 <tr>
306 <td><input type="checkbox" as='true'></td>
307 <td tag='hostname'>主机三</td>
308 <td tag='port'>1000</td>
309 <td tag='ip'>10.10.12.3</td>
310 <td tag='olin'>
311 <select name="ol" class="heds">
312 <option value="在线">在线</option>
313 <option value="下线">下线</option>
314 </select>
315 <a>下线</a>
316 </td>
317
318 </tr>
319 </tbody>
320 </table>
321 </div>
322 </div>
323 <!--遮罩层-->
324 <div class="c1 heds" id="z-cent"></div>
325 <!--对话框-->
326 <div class="c2 heds" id="z-first">
327 <form class="z-z">
328 <lable>主 机：</lable>
329 <input type="text" name="hostname" id="hosts" value=""><br /><br />
330 <lable>端 口：</lable>
331 <input type="text" name="port" id="ports" value=""><br /><br />
332 <lable>I P：</lable>
333 <input type="text" name="ip" id="ips" value=""><br />
334 <hr />
335 <input type="button" name="" id="cre" value="确定" >
336 <input type="button" id="gb" value="关闭">
337 </form>
338
339 </div>
340
341 </div>
342
343 </div>
344
345
346
347 <div class="pa-top" onclick="topy();"></div>
348
349
350 <script src="jquery-1.11.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
351
352 <script type="text/javascript">
353
354
355 //单个勾选
356 $('#tb tr td').delegate('input[type="checkbox"]','click',function () {
357 console.log($(this).prop('checked'));
358 if($('#ed').attr('as')&& $(this).prop('checked')){
359 edi_a(this);
360 }else if($('#ed').attr('as')&& $(this).prop('checked')==false){
361 edi_b(this);
362 }
363 })
364
365 //进入函数
366 function edi_a (self) {
367 $(self).attr('as','false');//设置是否编辑状态
368 $(self).parent().nextUntil('[tag="olin"]').each(function () {
369 // 父级 的所有兄弟 查找 属性有 tag 的
370 var v=$(this).text();//获取内容
371 $(this).empty();//清空内容
372 var new_v=$(this).append("<input type='text' value='"+v+"'>");//添加内容
373 })
374 var s=$(self).parent().nextAll('[tag="olin"]').children();//找到下拉菜单标签
375 s.each(function () {
376 $(this).removeClass('heds');//移除样式
377 $(this).next().remove();//清空内容
378 })
379 }
380
381 //退出函数
382 function edi_b (self) {
383 $(self).attr('as','true');//设置是否编辑状态
384 $(self).parent().nextUntil('[tag="olin"]').each(function () {
385 // 父级 的所有兄弟 查找 属性有 tag 的
386 //$(this).attr('as','true');
387 var v=$(this).find('input').val();//获取内容
388 $(this).find('input').remove('input');// 移除 标签
389 $(this).text(v);
390 })
391 var s=$(self).parent().nextAll('[tag="olin"]').children();//找到下拉菜单标签
392 s.each(function () {
393 $(this).addClass('heds');//添加样式
394 var ol=$(this).val();//获取值
395 var n='<a>'+ol+'</a>';
396 $(this).after(n);
397 })
398 }
399
400 ////编辑模式判断
401 $('.right-menu').delegate('.edits','click',function(){
402
403 if($(this).hasClass('edits-2')){
404 $(this).removeClass('edits-2');//移除样式
405 $(this).text('点击：进入编辑模式');//改变内容
406 $(this).removeAttr('as');//移除属性
407 editlistz ()
408 }else{
409 $(this).addClass('edits-2');//添加样式
410 $(this).text('点击：退出编辑模式');//改变内容
411 $(this).attr('as','disp');//添加属性
412 editlist();//编辑框函数
413 }
414 })
415
416 //退出编辑框函数
417 function editlistz () {
418 $('#tb tr').find('input[type="checkbox"]').each(function() {//获取表单内容 列表
419 if ($(this).prop('checked')) {//判断是否打勾
420
421 edi_b(this);
422 }
423 })
424 }
425
426 //进入编辑框函数
427 function editlist () {
428 $('#tb tr').find('input[type="checkbox"]').each(function() {//获取表单内容 列表
429 if ($(this).prop('checked')) {//判断是否打勾
430 //$(this).attr('as','false');
431 edi_a(this);
432 }
433 })
434 }
435
436 //批量上下线
437 $('#tb tr td').delegate('select[name="ol"]','click',function () {
438 $(this).keydown(function (event) {
439 if (event.keyCode==17&& $(this).mousedown()){
440 var ol=$(this).val();//获取值
441 var m=$(this).parent().parent().siblings();
442 // 父级 的父级 的所有兄弟
443 //console.log(m);
444 m.each(function () {
445 // 子级
446 if ($(this).find('input[as="false"]').prop('checked')) {//找到子级 是有选 上的
447 ($(this).children().find('[name="ol"]').val(ol));//进行赋值
448 }
449
450 })
451 return false;
452 }
453
454 })
455
456 })
457
458 //左侧菜单js 点击函数
459 $('.meuns').click(function(){
460 //当前点击的标签
461 $(this).next().removeClass('hide');//找到下一个标签 移除样式
462 $(this).parent().siblings().find('.content').addClass('hide')//获取父级,的同级所有兄弟标签 ,查找 其所有下级的类名,添加样式
463 })
464
465 //返回顶部
466 function topy(){
467 document.body.scrollTop=0;
468 }
469
470 //显示对话框
471 $('#add').click(function(){
472 $('#z-cent,#z-first').removeClass('heds');//移除类名 样式
473 $('.z-z input[type="text"]').val('');
474 })
475
476 //关闭对话框
477 $('#gb').click(function(){
478 $('#z-cent,#z-first').addClass('heds');//添加 类名 样式
479 })
480
481 //添加主机 IP
482 $('#cre').click(function(){
483 var flag=true;//默认提交
484 $('.error').remove();//事先移除 提示标签
485 $('.z-z').find('input[type="text"]').each(function () {//查找 type=text 的input 循环判断
486 var v=$(this).val();//当前标签的值
487 if(v.length<=0){
488 flag=false;//改为不能提交
489 var tag =document.createElement('span');//创建一个标签
490 tag.className='error';//添加一个类名
491 tag.innerHTML='不能为空';
492 $(this).after(tag);
493 }
494 })
495 if(flag==true){
496 var host=$('#hosts').val();//主机名
497 var port=$('#ports').val();//端口
498 var ip=$('#ips').val();//ip
499 var tab=$('#tab');//获取页面表格
500 var newtr='<tr><td><input type="checkbox" as="true"></td><td>'+host+'</td><td>'+port+'</td><td>'+ip+'</td><td tag="olin"><select name="ol" class="heds"><option value="在线">在线</option><option value="下线">下线</option></select><a>在线</a></td></tr>';
501 $(tab).append(newtr);
502 $('#z-cent,#z-first').addClass('heds');//添加 类名 样式
503 }
504 })
505
506
507 //全选
508 $('#all').click(function (){
509 $(':checkbox').prop('checked',true).each(function () {
510
511 if ($('#ed').attr('as')&& $(this).attr('as')=='true') {//判断是否是编辑模式,,
512 edi_a(this);
513 }
514
515 });
516
517 })
518
519 //取消
520 $('#remov').click(function (){
521 $(':checkbox').prop('checked',false).each(function () {
522
523 if ($('#ed').attr('as')&& $(this).attr('as')=='false') {
524 edi_b(this);
525 }
526 })
527 })
528
529 //反选
530 //通过 each循环 三元运算 操作 写法
531 $('#rest').click(function (){
532 $('#tb :checkbox').each(function(){
533 var v=$(this).prop('checked')?false:true;//获取值
534 $(this).prop("checked",v);//赋于checkbox
535 if(v==true){//判断是否是勾选 勾选再进行判断
536 if ($('#ed').attr('as')&& $(this).attr('as')=='true') {//如果是编辑模式 并且 处于锁定状态
537 edi_a(this);//进入编辑
538 }
539
540 }else{
541 if ($('#ed').attr('as')&& $(this).attr('as')=='false') {//如果是编辑模式 并且 处于非锁定状态
542
543 edi_b(this);//退出编辑
544 }
545 }
546 })
547
548 })
549
550
551 </script>
552
553 </body>
554 </html>View Code
转载于:https://www.cnblogs.com/uge3/p/7267629.html
python第九十一天----第十六周作业相关推荐
- C语言程序设计作业07：第十六周作业
| 这个作业属于哪个课程 C语言程序设计II 我在这个课程的目标是 了解并精通C语言 这个作业在那个具体方面帮助我实现目标 了解函数的编译和构造,认识有些已有的库函数 -参考文献- -C语言程序设计教 ...
- 研究生周报（第十六周）
研究生周报(第十六周) 学习目标 语音与语言处理--机器翻译和编码器解码器模型 语音与语言处理--成分语法 语音与语言处理--成分解析 语音与语言处理--依存解析 Scala基本语法和简单使用 地址项 ...
- 达拉草201771010105《面向对象程序设计（java）》第十六周学习总结
达拉草201771010105<面向对象程序设计(java)>第十六周学习总结 第一部分:理论知识 1.程序与进程的概念: (1)程序是一段静态的代码,它是应用程序执行的蓝 本. (2)进 ...
- “进度条”博客——第十六周
"进度条"博客 --第十六周 第十六周 所花时间(包括上课) 上课时间:本周一节课,共1.5个小时左右 课下时间: 周四下午3点半到6点半(最终修改BUG) 周五下午4点到6点半( ...
- python数据挖掘学习笔记】十六.逻辑回归LogisticRegression分析鸢尾花数据
但是很多时候数据是非线性的,所以这篇文章主要讲述逻辑回归及Sklearn机器学习包中的LogisticRegression算法 #2018-03-28 16:57:56 March Wednesday ...
- 杨玲 201771010133《面向对象程序设计（java）》第十六周学习总结
<面向对象程序设计(java)>第十六周学习总结 第一部分:理论知识学习部分 1.程序是一段静态的代码,它是应用程序执行的蓝本.进程是程序的一次动态执行,它对应了从代码加载.执行至执行完毕 ...
- C语言编程＞第十六周 ② 函数fun的功能是：统计长整数test的各位上出现数字5、6、7的次数，并通过外部（全局）变量sum5、sum6、sum7返回主函数。
例题:函数fun的功能是:统计长整数test的各位上出现数字5.6.7的次数,并通过外部(全局)变量sum5.sum6.sum7返回主函数. 例如:当test=89431676时,结果应该为:sum5 ...
- C语言编程＞第二十六周 ⑥ 请补充fun函数，该函数的功能是：按 “0”到 “9”统计一个字符串中的奇数数字字符各自出现的次数，结果保存在数组num中。注意：不能使用字符串库函数。
例题:请补充fun函数,该函数的功能是:按 "0"到 "9"统计一个字符串中的奇数数字字符各自出现的次数,结果保存在数组num中.注意:不能使用字符串库函数. ...
- 第十六周学习周报（20180618-20180624）
第十六周学习周报 一.本周学习情况 1.本周主要学习李宏毅老师的机器学习课程 Unsupervised Learning-Linear Methods Unsupervised Learning-Ne ...
最新文章
- AIFramework框架Jittor特性（上）
- javascript js异步加载
- Alt + sysrq + REISUB doesn't reboot my laptop
- unity3d世界坐标系和本地坐标系
- 想拥有一款钢铁侠Jarvis管家的软件吗？
- 欧拉通路 java,欧拉回路
- 【离散数学中的数据结构与算法】五 排列与组合一
- python递归函数详解-讲解Python中的递归函数
- UI标签库专题五：JEECG智能开发平台 Tabs(选项卡父标签)
- mysql导出表部分数据
- python中yaml模块的使用_详解Python yaml模块
- 20220323:双边沿触发器趣解
- uc 开发 缓存css,使用css3 flex布局在手机uc浏览器中一塌糊涂？
- 图:最新微软框架的现场计分双屏管理系统终于收工,大家请欣赏界面。
- 【聊透SpringMVC】28天肝完阿里面试通关宝典
- 存储器容量的扩展 —— 位/字扩展
- Java软件开发技术交流群
- K33 不是平面图_Edraw Max:一款简单好用的建筑平面图设计软件！
- 根据rpt文件打印报表
- 读书感受 之 《如何说客户才会听，怎么听客户才肯说》