python第九十一天----第十六周作业
实现功能:
1、非编辑模式
可以对每行进行选择，全选，取消，反选 ；
2、编辑模式
进入编辑模式时:
如果行被选中，则被选中的行变为可编辑状态，未选中则不改变
退出编辑模式时:
保存所有的行的修改并进入非编辑状态
单个勾选:
勾上时: 进入编辑状态
去勾时: 保存所在行的修改进入非编辑状态
全选时:
所有行进入编辑状态
取消是:
所有行保存修改进入非编辑状态
反选时:
被选中的行
取消勾选 保存修改进入非编辑状态
未被选中的行
进行勾选 进入编辑状态
批量上下线:
按住CTRL键 点击上下线的下拉项,可以批量进行设置上下线 被选中的行进行统一的设置
3、添加主机
可以添加主机
详细代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编辑框功能</title> <style type="text/css">
/*顶部菜单*/
.pag-head{
position: fixed;
z-index: 7;
top: 0;
left: 0;
right: 0;
height: 48px;
width: 100%;
background: #005EA7; }
.meun_top{
height: 48px;
line-height: 48px;
width: 960px;
/*border: 1px solid red;*/
margin: 0 auto;
}
/*顶部菜单组*/
.meuns_top{
text-decoration: none;
color: white;
padding: 0px 10px 0px 10px;
display: inline-block;
}
.meuns_top:hover{
background-color: rgba(64,119,203,0.6);
} .clear_div{
clear: both;
}
/*顶部菜单结束*/ /*下方大框*/
.pag-cent{
margin-top: 50px; } /*左侧菜单*/
.left-meun{
z-index: 8;
position: fixed;
top: 50px;
left: 55px;
}
.meuns{ background-color: #005EA7;
height: 45px;
width:150px;
color:white;
line-height: 45px;
text-align: center;
}
.meuns:hover{
background-color: rgba(64,119,203,0.6);
}
.hide{
display: none;
}
.content{
margin-left: 65%;
}
.item{
width:150px;
}
/*左侧菜单结束*/ /*下方右边内容块*/
.big-content{
height: 1000px;
border: 1px solid green;
} .content_right{
margin: 0 auto;
height: 800px;
width: 960px;
border: 1px solid blueviolet; } .hosts{
margin-left: 30px;
margin-top: 20px;
}
table{
border-spacing: 1px;
margin-top: 8px;
}
/*遮罩层*/
.c1{
position: fixed;
z-index: 9;
/*打开多层样式 fixed模式 定义层级为9*/
top:0;
right:0;
left:0;
bottom:0;
/*上面表示全覆盖*/
background-color: black;
/*上面为背景色 为黑 下面为透明度为50%*/
opacity: 0.5;
}
.c2{
position: fixed;
z-index: 10;
/*打开多层样式 fixed模式 定义层级为9*/ width:400px;
height: 300px;
top:50%;
left:50%;
margin-left: -200px;
margin-top: -150px;
background-color: white; }
.z-z{
width: 230px;
height: 120px;
margin-top: 90px;
margin-left: 90px;
} .error{
color: red;
}
hr{
width: 230px;
}
#cre{
margin-left: 70px;
}
.heds{
/*默认不显示*/
display: none;
} .right-menu{
width: 320px;
height: 30px;
line-height: 30px;
}
.edits{
float: right;
border: 1px solid darkgray;
padding: 2px;
background-color: #A9A9A9;
font-size: 9px;
}
.edits-2{
background-color: orange;
} .option-ol{ }
/*下方右边内容块结束*/ /*返回顶部*/
.pa-top{
width: 68px;
height: 48px;
position: fixed;
right: 25px;
bottom: 25px;
background-image: url(img/top.png);
background-position: -425px -270px ; }
</style>
</head>
<body style="margin: 0">
<!--顶部菜单-->
<div class="pag-head">
<div class="meun_top">
<a href="" class="meuns_top">顶部菜单一</a>
<a href="" class="meuns_top">顶部菜单二</a>
<a href="" class="meuns_top">顶部菜单三</a>
<a href="" class="meuns_top">顶部菜单四</a>
<a href="" class="meuns_top">顶部菜单五</a>
<a href="" class="meuns_top">顶部菜单六</a>
</div>
<div class="clear_div"> </div> </div>
<!--下方大框-->
<div class="pag-cent"> <!--左边菜单-->
<div class="left-meun">
<div class="item">
<div id="i1" class="meuns">菜单1</div>
<div class="content">
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
</div>
</div> <div class="item">
<div id="i2" class="meuns">菜单2</div>
<div class="content hide">
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
</div>
</div> <div class="item">
<div id="i3" class="meuns">菜单3</div>
<div class="content hide">
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
</div>
</div> <div class="item">
<div id="i4" class="meuns">菜单4</div>
<div class="content hide">
<div>内容4</div>
<div>内容4</div>
<div>内容4</div>
<div>内容4</div> </div> </div> </div> <!--右边内容-->
<div class="big-content">
<div class="content_right">
<div class="hosts">
<div class="right-menu">
<input type="button" id='add' value="添加" >
<input type="button" id="all" value="全选" >
<input type="button" id="remov" value="取消" >
<input type="button" id="rest" value="反选" >
<div class="edits" id="ed" name='none'>
点击：进入编辑模式
</div>
</div> <table border="1" id="tab">
<thead>
<tr>
<th>选择</th>
<th>主机</th>
<th>端口</th>
<th>ip</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb"> <tr>
<td><input type="checkbox" as='true'></td>
<td tag='hostname'>主机一</td>
<td tag='port'>1000</td>
<td tag='ip'>10.10.12.1</td>
<td tag='olin'>
<select name="ol" class="heds">
<option value="在线">在线</option>
<option value="下线">下线</option>
</select>
<a>在线</a>
</td>
<tr>
<td><input type="checkbox" as='true'></td>
<td tag='hostname'>主机二</td>
<td tag='port'>1000</td>
<td tag='ip'>10.10.12.2</td>
<td tag='olin'>
<select name="ol" class="heds">
<option value="在线">在线</option>
<option value="下线">下线</option>
</select>
<a>下线</a>
</td>
</tr>
<tr>
<td><input type="checkbox" as='true'></td>
<td tag='hostname'>主机三</td>
<td tag='port'>1000</td>
<td tag='ip'>10.10.12.3</td>
<td tag='olin'>
<select name="ol" class="heds">
<option value="在线">在线</option>
<option value="下线">下线</option>
</select>
<a>下线</a>
</td> </tr>
</tbody>
</table>
</div>
</div>
<!--遮罩层-->
<div class="c1 heds" id="z-cent"></div>
<!--对话框-->
<div class="c2 heds" id="z-first">
<form class="z-z">
<lable>主 机：</lable>
<input type="text" name="hostname" id="hosts" value=""><br /><br />
<lable>端 口：</lable>
<input type="text" name="port" id="ports" value=""><br /><br />
<lable>I P：</lable>
<input type="text" name="ip" id="ips" value=""><br />
<hr />
<input type="button" name="" id="cre" value="确定" >
<input type="button" id="gb" value="关闭">
</form> </div> </div> </div> <div class="pa-top" onclick="topy();"></div> <script src="jquery-1.11.3/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //单个勾选
$('#tb tr td').delegate('input[type="checkbox"]','click',function () {
console.log($(this).prop('checked'));
if($('#ed').attr('as')&& $(this).prop('checked')){
edi_a(this);
}else if($('#ed').attr('as')&& $(this).prop('checked')==false){
edi_b(this);
}
}) //进入函数
function edi_a (self) {
$(self).attr('as','false');//设置是否编辑状态
$(self).parent().nextUntil('[tag="olin"]').each(function () {
// 父级 的所有兄弟 查找 属性有 tag 的
var v=$(this).text();//获取内容
$(this).empty();//清空内容
var new_v=$(this).append("<input type='text' value='"+v+"'>");//添加内容
})
var s=$(self).parent().nextAll('[tag="olin"]').children();//找到下拉菜单标签
s.each(function () {
$(this).removeClass('heds');//移除样式
$(this).next().remove();//清空内容
})
} //退出函数
function edi_b (self) {
$(self).attr('as','true');//设置是否编辑状态
$(self).parent().nextUntil('[tag="olin"]').each(function () {
// 父级 的所有兄弟 查找 属性有 tag 的
//$(this).attr('as','true');
var v=$(this).find('input').val();//获取内容
$(this).find('input').remove('input');// 移除 标签
$(this).text(v);
})
var s=$(self).parent().nextAll('[tag="olin"]').children();//找到下拉菜单标签
s.each(function () {
$(this).addClass('heds');//添加样式
var ol=$(this).val();//获取值
var n='<a>'+ol+'</a>';
$(this).after(n);
})
} ////编辑模式判断
$('.right-menu').delegate('.edits','click',function(){ if($(this).hasClass('edits-2')){
$(this).removeClass('edits-2');//移除样式
$(this).text('点击：进入编辑模式');//改变内容
$(this).removeAttr('as');//移除属性
editlistz ()
}else{
$(this).addClass('edits-2');//添加样式
$(this).text('点击：退出编辑模式');//改变内容
$(this).attr('as','disp');//添加属性
editlist();//编辑框函数
}
}) //退出编辑框函数
function editlistz () {
$('#tb tr').find('input[type="checkbox"]').each(function() {//获取表单内容 列表
if ($(this).prop('checked')) {//判断是否打勾 edi_b(this);
}
})
} //进入编辑框函数
function editlist () {
$('#tb tr').find('input[type="checkbox"]').each(function() {//获取表单内容 列表
if ($(this).prop('checked')) {//判断是否打勾
//$(this).attr('as','false');
edi_a(this);
}
})
} //批量上下线
$('#tb tr td').delegate('select[name="ol"]','click',function () {
$(this).keydown(function (event) {
if (event.keyCode==17&& $(this).mousedown()){
var ol=$(this).val();//获取值
var m=$(this).parent().parent().siblings();
// 父级 的父级 的所有兄弟
//console.log(m);
m.each(function () {
// 子级
if ($(this).find('input[as="false"]').prop('checked')) {//找到子级 是有选 上的
($(this).children().find('[name="ol"]').val(ol));//进行赋值
} })
return false;
} }) }) //左侧菜单js 点击函数
$('.meuns').click(function(){
//当前点击的标签
$(this).next().removeClass('hide');//找到下一个标签 移除样式
$(this).parent().siblings().find('.content').addClass('hide')//获取父级,的同级所有兄弟标签 ,查找 其所有下级的类名,添加样式
}) //返回顶部
function topy(){
document.body.scrollTop=0;
} //显示对话框
$('#add').click(function(){
$('#z-cent,#z-first').removeClass('heds');//移除类名 样式
$('.z-z input[type="text"]').val('');
}) //关闭对话框
$('#gb').click(function(){
$('#z-cent,#z-first').addClass('heds');//添加 类名 样式
}) //添加主机 IP
$('#cre').click(function(){
var flag=true;//默认提交
$('.error').remove();//事先移除 提示标签
$('.z-z').find('input[type="text"]').each(function () {//查找 type=text 的input 循环判断
var v=$(this).val();//当前标签的值
if(v.length<=0){
flag=false;//改为不能提交
var tag =document.createElement('span');//创建一个标签
tag.className='error';//添加一个类名
tag.innerHTML='不能为空';
$(this).after(tag);
}
})
if(flag==true){
var host=$('#hosts').val();//主机名
var port=$('#ports').val();//端口
var ip=$('#ips').val();//ip
var tab=$('#tab');//获取页面表格
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>';
$(tab).append(newtr);
$('#z-cent,#z-first').addClass('heds');//添加 类名 样式
}
}) //全选
$('#all').click(function (){
$(':checkbox').prop('checked',true).each(function () { if ($('#ed').attr('as')&& $(this).attr('as')=='true') {//判断是否是编辑模式,,
edi_a(this);
} }); }) //取消
$('#remov').click(function (){
$(':checkbox').prop('checked',false).each(function () { if ($('#ed').attr('as')&& $(this).attr('as')=='false') {
edi_b(this);
}
})
}) //反选
//通过 each循环 三元运算 操作 写法
$('#rest').click(function (){
$('#tb :checkbox').each(function(){
var v=$(this).prop('checked')?false:true;//获取值
$(this).prop("checked",v);//赋于checkbox
if(v==true){//判断是否是勾选 勾选再进行判断
if ($('#ed').attr('as')&& $(this).attr('as')=='true') {//如果是编辑模式 并且 处于锁定状态
edi_a(this);//进入编辑
} }else{
if ($('#ed').attr('as')&& $(this).attr('as')=='false') {//如果是编辑模式 并且 处于非锁定状态 edi_b(this);//退出编辑
}
}
}) }) </script> </body>
</html>
python第九十一天----第十六周作业的更多相关文章
- 第十六周博客作业 <西北师范大学| 周安伟>
第十六周作业 助教博客链接https://home.cnblogs.com/u/zaw-315/ 作业要求链接https://www.cnblogs.com/nwnu-daizh/p/10980707 ...
- Python之路【第十六篇】：Django【基础篇】
Python之路[第十六篇]:Django[基础篇] Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了O ...
- 201771010134杨其菊《面向对象程序设计(java）》第十六周学习总结
第十六周学习总结 第一部分:理论知识 1. 程序是一段静态的代码,它是应用程序执行的蓝本.进程是程序的一次动态执行,它对应了从代码加载.执行至执行完毕的一个完整过程.操作系统为每个进程分配一段独立的内 ...
- 20155317 十六周second 取值
20155317 十六周second 取值 题目如下图: secondset #define base 0xFFFFC0000 # #define &clock void setsecond( ...
- 20145302张薇《Java程序设计》第十六周课程总结
20145302 <Java程序设计>第十六周课程总结 实验报告链接汇总 实验一 Java开发环境的熟悉 实验二 Java面向对象程序设计 实验三 敏捷开发与XP实践 实验四 Andoid ...
- 201671010140. 2016-2017-2 《Java程序设计》java学习第十六周
java学习第十六周-并发 本周,学习了Java中线程,并发的知识,在老师的带领下,进行了对知识的理解学习,以及对实验的运行讲解,对这一块内容掌握的还可以,在自主编程中,也能够完成.线, ...
- 201871010123-吴丽丽 《面向对象程序设计（Java）》第十六周学习总结
201871010123-吴丽丽 <面向对象程序设计(Java)>第十六周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...
- 201271050130-滕江南-《面向对象程序设计（java）》第十六周学习总结
201271050130-滕江南-<面向对象程序设计(java)>第十六周学习总结 博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.c ...
- 201871010111-刘佳华《面向对象程序设计（java）》第十六周学习总结
学号-姓名<面向对象程序设计(java)>第十六周学习总结 实验十四 应用程序归档与线程初步 实验时间 2019-12-12 第一部分:理论知识总结 1.程序与进程的概念 ‐程序是一段静 ...
随机推荐
- web自动化测试---测试环境的部署
当前我的测试环境配置如下: python3.6 下载地址: https://www.python.org/downloads/release/python-365/ 选择windows版本,下载完成后 ...
- 30 个java编程技巧
1.return 一个空的集合,而不是 null 如果一个程序返回一个没有任何值的集合,请确保一个空集合返回,而不是空元素.这样你就不用去写一大堆 ”if else” 判断null元素. Java 的 ...
- canvas图片上传相关学习
今天主要是研究了canvas的关于图片上传的相关知识, context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
- epel安装第三方扩展源后，运行yum报错的解决方案
yum安装报错:Cannot retrieve metalink for repository: epel. Please verify its path and try again 解决方法: 一句 ...
- jfinal定时任务插件jfinal-quartz
这个定时任务插件精确的时间可以到秒,使用方面跟jfinal-scheduler插件的使用方式差不多 Dreampie/jfinal-quartz https://github.com/Dreampie ...
- csv文件格式说明
csv文件应用很广泛,历史也很悠久.有很多种类型的csv格式,常用的是rfc 4180定义的格式. csv文件包含一行或多行记录,每行记录中包含一个或多个字段.记录与记录之间使用换行符分隔,最后一个记 ...
- SQL Server重置INDETITY的开始值
@@IDENTITY 和SCOPE_IDENTITY 返回在当前会话中的任何表内所生成的最后一个标识值.但是,SCOPE_IDENTITY 只返回插入到当前作用域中的值:@@IDENTITY 不受限于 ...
- Shell 函数定义与调用
linux shell 可以用户定义函数,然后在 shell 脚本中可以随便调用. 以一个计算两数之和的函数为例: #! /bin/bash # 函数定义 sum(){ return $(($1+$2 ...
- c# 获取本机IP
/// <summary> /// 获取本机IP /// </summary> /// <returns></returns> public stati ...
- 菜鸟入门【ASP.NET Core】2：部署到IIS
配置IIS模块 ASP.NET Core Module载地址:https://docs.microsoft.com/en-us/aspnet/core/fundamentals/servers/asp ...