day16-作业 后台管理
二话不说开撸作业
作业要求：
后台管理平台 ，编辑表格：
1. 非编辑模式：
可对每行进行选择； 反选； 取消选择
2. 编辑模式:
进入编辑模式时如果行被选中，则被选中的行万变为可编辑状态，未选中的不改变
退出编辑模式时，所有的行进入非编辑状态
处于编辑模式时，行被选中则进入编辑状态，取消选择则进入非编辑状态
需要导入 jquery , 版本：1.2.。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>主机后台管理程序</title>
<link rel="icon" href="image/link.jpg">
<style>
.body{
margin: 0 auto;
}
.pg-header{
height: 60px;
width: 90%;
line-height: 60px;
text-align: center;
/*background-color: #dddddd;*/
/*margin-left: 30%;*/
}
.pg-content{
margin-left:30%
}
.edit{
cursor: pointer;
width: 108px;
background-color: #989898;
height: 20px;
line-height: 20px;
text-align: center;
margin-left: 15px;
}
.editing{
background-color: brown;
} </style> </head>
<body class="body">
<div class="pg-header">
<h1>主机后台管理程序</h1>
</div>
<div class="pg-content">
<table border="1" class="tab1">
<thead>
<tr>
<th>选项</th>
<th>主机IP</th>
<th>端口</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td><input type="text" disabled="disabled" value="1.1.1.1"></td>
<td><input type="text" disabled="disabled" value="22"></td>
<td>
<select disabled="true">
<option selected="selected">在线</option>
<option>下线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="text" disabled="disabled" value="2.2.2.2"></td>
<td><input type="text" disabled="disabled" value="22"></td>
<td>
<select disabled="true">
<option selected="selected">在线</option>
<option>下线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="text" disabled="disabled" value="3.3.3.3"></td>
<td><input type="text" disabled="disabled" value="23"></td>
<td>
<select disabled="true">
<option selected="selected">在线</option>
<option>下线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="text" disabled="disabled" value="5.5.5.5"></td>
<td><input type="text" disabled="disabled" value="8080"></td>
<td>
<select disabled="true">
<option selected="selected">在线</option>
<option>下线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="text" disabled="disabled" value="6.6.6.6"></td>
<td><input type="text" disabled="disabled" value="22"></td>
<td>
<select disabled="true">
<option>在线</option>
<option selected="selected">下线</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" value="全选" id="check_all">
<input type="button" value="反选" id="reverse_all">
<input type="button" value="取消" id="cancle_all">
<p></p>
<div class="edit" id="edit">进入编辑模式</div>
</div>
<script src="jq.js"></script>
<script>
// 全选功能
$("#check_all").click(function(){
if ($("#edit").attr("class").indexOf("editing")==-1) {
$("input[type='checkbox']").prop('checked', true);
}else{
$("input[type='checkbox']").prop('checked', true);
$("input[type='checkbox']").each(function(v){
var tag = $(this).parent().nextAll();
$(tag[0].children).removeAttr("disabled");
$(tag[1].children).removeAttr("disabled");
$(tag[2].children).removeAttr("disabled");
})
}
}); // 反选功能
$("#cancle_all").click(function(){
if ($("#edit").attr("class").indexOf("editing")==-1) {
$("input[type='checkbox']").prop('checked', false);
}else{
$("input[type='checkbox']").prop('checked', false);
$("input[type='checkbox']").each(function(v){
// console.log(this);
var tag = $(this).parent().nextAll();
$(tag[0].children).attr("disabled","disabled");
$(tag[1].children).attr("disabled","disabled");
$(tag[2].children).attr("disabled","disabled");
$("#edit").removeClass("editing");
$("#edit")[0].innerText="进入编辑模式"
$("#edit").bind('click',editing);
})
}
}); // 取消键功能
$("#reverse_all").click(function(){
if ($("#edit").attr("class").indexOf("editing")==-1) {
$('input[type="checkbox"]').each(function (k) {
if (this.checked) {
this.checked = false
} else {
this.checked = true
}
})
}else{
$('input[type="checkbox"]').each(function (k) {
if (this.checked) {
this.checked = false;
var tag = $(this).parent().nextAll();
$(tag[0].children).attr("disabled","disabled");
$(tag[1].children).attr("disabled","disabled");
$(tag[2].children).attr("disabled","disabled");
} else {
this.checked = true;
var tag = $(this).parent().nextAll();
$(tag[0].children).removeAttr("disabled");
$(tag[1].children).removeAttr("disabled");
$(tag[2].children).removeAttr("disabled");
}
})
}
}); // 进入编辑模式绑定事件
$("#edit").bind('click',editing); function editing(){
$(this).addClass("editing");
this.innerText="编辑中。。。";
// 解除绑定
$("#edit").unbind('click',editing);
$("input[type='checkbox']").each(function(a) {
if (this.checked) {
var tag = $(this).parent().nextAll();
$(tag[0].children).removeAttr("disabled");
$(tag[1].children).removeAttr("disabled");
$(tag[2].children).removeAttr("disabled");
}
})
} // 在编辑模式下，和非编辑模式下，选择单个功能
$("input[type='checkbox']").click(function(c){
// console.log(1,this);
if ($("#edit").attr("class").indexOf("editing") != -1) {
// console.log(2,this);
if(this.checked){
var tag = $(this).parent().nextAll();
$(tag[0].children).removeAttr("disabled");
$(tag[1].children).removeAttr("disabled");
$(tag[2].children).removeAttr("disabled"); }else{
var tag = $(this).parent().nextAll();
$(tag[0].children).attr("disabled","disabled");
$(tag[1].children).attr("disabled","disabled");
$(tag[2].children).attr("disabled","disabled");
} }else{}
}); </script>
</body>
</html>
day16-作业 后台管理的更多相关文章
- 老男孩Day16作业：登录、注册、后台管理页面（动态）
一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面 二.博客地址:https://www.cnblogs.com/catepython/p/93 ...
- 老男孩Day17作业：后台管理平台编辑表格
一.作业需求: 后台管理平台 ,编辑表格: 1. 非编辑模式: 可对每行进行选择: 反选: 取消选择 2. 编辑模式: 进入编辑模式时如果行被选中,则被选中的行万变为可编辑状态,未选中的不改变 退出编 ...
- Day5作业,商城+ATM机+后台管理
晚来了....东西太多,需要写的blog内容太多,re讲的渣渣,不明白为什么oldboy经常换老师,吐槽下吧,真心不爱了.... github地址在这:https://github.com/ccorz ...
- 集成一体化的移动POS开单扫描解决方案--"移动开单掌上POS"。它集后台管理软件
针对商贸企业的批发.零售管理设计的软硬件集成一体化的移动POS开单扫描解决方案--"移动开单掌上POS".它集后台管理软件.商品价格.库存等信息查询,店铺.展销会开单,移动捡货配送 ...
- python 全栈开发，Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)
一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...
- shell作业后台执行的方法
来思考几种场景: 1.某个脚本需要执行时间比较长,无人值守,可能执行过程中因ssh会话超时而中断? 2.某次测试一段代码,需要临时放入后台运行? 3.放入后台运行的脚本,需要在一段时间后重新调到前台? ...
- day20 project+查看新闻列表 + 点赞 + 图片验证码 + 评论和多级评论 + 后台管理 + webSocket + kindEditor
Day20回顾: 1. 请求生命周期 2. 中间件 md = [ "file_path.classname" ] process_request[可有可无] process_res ...
- ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理（7）之扩展基类和区域创建以及文本编辑配置
一.扩展基类和区域创建 (1)在应用之前,我们先在表现层创建一个公共的系统扩展文件来(SystemExtension)存放我们需要延伸和扩展的方法类. 在常规的项目系统操作中,我们都需要用到增删查改的 ...
- MVC5 网站开发之七 用户功能 1、角色的后台管理
角色是网站中都有的一个功能,用来区分用户的类型.划分用户的权限,这次实现角色列表浏览.角色添加.角色修改和角色删除. 目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 ...
随机推荐
- 【spark】RDD创建
首先我们要建立 sparkconf 配置文件,然后通过配置文件来建立sparkcontext. import org.apache.spark._ object MyRdd { def main(ar ...
- 【牛客练习赛12-B】迷宫(BFS)
链接:https://www.nowcoder.net/acm/contest/68/B 题目描述 这是一个关于二维迷宫的题目.我们要从迷宫的起点 'S' 走到终点 'E',每一步我们只能选择上下左右 ...
- 关于 SimpleDateFormat 的非线程安全问题及其解决方案
一直以来都是直接用SimpleDateFormat开发的,没想着考虑线程安全的问题,特记录下来(摘抄的): 1.问题: 先来看一段可能引起错误的代码: package test.date; impor ...
- react-router-dom: 重定向默认路由
<appLayout> <Switch> <Route path='/' exact render={()=> ( <Redirect to={this.ge ...
- MySQL 福利彩票业务 如何存储毫秒微秒
朋友在做福利彩票业务,遇到一个存储毫秒微秒数据的需求,问我mysql里面有何解决方案.我脑中一搜索,以前没有关注到,于是去官网查看,找到11.3.6 Fractional Seconds in Tim ...
- 9.详解引擎(InnoDB,MyISAM)的内存优化攻略?
整理自互联网!! 本篇我们讲解内存优化. 注意:以下都是在MySQL目录下的my.ini文件中改写. 一.InnoDB内存优化 InnoDB用一块内存区域做I/O缓存池,该缓存池不仅用来缓存InnoD ...
- beego数据输出
beego数据输出 概览 直接输出字符串 模板数据输出 静态模板数据输出 动态模板数据输出 json格式数据输出 xml格式数据输出 jsonp调用 概览 直接输出字符串 通过beego.Cont ...
- Kali Linux安装SSH Server
Kali Linux默认并没有安装SSH服务,为了实现远程登录Kali Linux,我们需要安装SSH服务. 安装 OpenSSH Server # apt-get install openssh-s ...
- 关于15桥梁课程1&2的笔记以及待做事项的梳理
1.指针所占用的空间是固定的 2.void *malloc(sizeof(int)); (这玩意耗时间,老师说通过内存池解决) free(p);free(p); 两次free()报错,正确的做法: ...
- java多线程:线程体往外抛出异常的处理机制实践
1当线程的线程体内部无捕获异常,将异常抛出线程体外,不同情况下,程序处理机制 测试类 package com.ehking.bankchannel.domesticremit.facade.impl; ...