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.程序与进程的概念 ‐程序是一段静 ...
随机推荐
- [源码]K8 Cscan模块 C#获取内网主机IP/机器名/Banner/网页标题源码
[原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...
- 微服务开发有道之把项目迁移到Kubernetes上的5个小技巧
我们将在本文中提供5个诀窍帮你将项目迁移到Kubernetes上,这些诀窍来源于过去12个月中OpenFaas社区的经验.下文的内容与Kubernetes 1.8兼容,并且已经应用于OpenFaaS ...
- 边缘化搭建 DotNet Core 2.1 自动化构建和部署环境(上)
写在前面 写这篇文章的缘由是由于笔者的对新兴技术方向有所追求,但个人资产有限,只能容许购买一台阿里云低配1核2G服务器.服务器上搭建了 Centos7 & Docker & Jenki ...
- 从零开始学 Web 之 移动Web（五）touch事件的缺陷，移动端常用插件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Spring Boot 解决方案 - 配置
习惯优于配置 Spring Boot 项目的重要思想就是"习惯优于配置",这也是为什么该项目诞生的原因,让开发者免于 Spring 生态中各种项目的配置.尽管如此,但项目中完全零配 ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇（十二）：解决跨域问题
什么是跨域? 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 如果一个请求地址里面的协议.域名和端口号都相同,就属于同源. ...
- 从架构演进的角度聊聊Spring Cloud都做了些什么
1.从架构演进的角度聊聊Spring Cloud都做了些什么?2.中小型互联网公司微服务实践-经验和教训3.Spring Cloud在国内中小型公司能用起来吗?
- mysql优化的21条经验(转)
1. 为查询缓存优化你的查询大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的.当有很多相同的查询被执行了多次的时候,这些查询结果会被放到一个 ...
- [转]Angular2-组件间数据传递的两种方式
本文转自:https://www.cnblogs.com/longhx/p/6960288.html Angular2组件间数据传递有多种方式,其中最常用的有两种,一种是配置元数据(或者标签装饰),一 ...
- “未能加载文件或程序集“XXX”或它的某一个依赖项。试图加载格式不正确的程序”问题的解决
发布到win7 64位旗舰版iis上时,报:“未能加载文件或程序集“BC.Common”或它的某一个依赖项.试图加载格式不正确的程序”. 该DLL的本地复制没有设置为true(在项目引用里找到该引用, ...