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 网站开发之二 ...
随机推荐
- 【scala】应用程序和App特性
一.应用程序 要运行一个Scala对象,必须提供一个独立对象的名称.这个独立对象需要包含一个main方法,该方法接受一个Array[String]作为参数,结果类型为Unit. import Chec ...
- 图解 ASP.NET Core开发环境准备
2016年6月28日微软宣布发布 .NET Core 1.0.ASP.NET Core 1.0 和 Entity Framework Core 1.0. .NET Core是微软在两年前发起的开源跨平 ...
- shell与正则表达式
作业一:整理正则表达式博客 已整理完.作业二:grep作业(正则表达式及字符处理) 目标文件/etc/passwd,使用grep命令或egrep 1．显示出所有含有root的行:[root@bogon ...
- linux文件组、权限等
文件所有者.所在组合其他组 --改变用户所在组 组和在oa系统中的组差不多,用户代表的好像是个体,组有点像角色的意思.不过权限的话并不是个体从组中获得,组仅仅是一个机制,进行部分文件控制与共享 ...
- LitJson使用中需要注意的一些问题（转）
LitJson使用中需要注意的一些问题 使用C#做Untiy开发时,有解析Json的需求,选择使用了LitJson这个库,因为之前我们是使用lua的,这个库会将Json解析后保存为JsonData,这 ...
- 旧书重温：0day2【10】第五章 堆溢出利用2
好久没有发帖子啦!最近一直很忙!但是还是抽空学习啦下! 前段时间匆匆忙忙的把0day2上的堆溢出实验做啦! 可能当时太浮躁啦,很多细节没注意!结果:实验结果很不满意!所以就有啦这一篇!! 上一篇是发布 ...
- echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.
一:错误描述:echarts.js:1136 Uncaught Error: Initialize failed: invalid dom. 二:错误原因:echarts在用json数据请求时未调用 ...
- Weex入门篇——Mac 安装Weex
相关文档:http://blog.csdn.net/jasonblog/article/details/51863173 前言 相比较于React Native的“Learn once, write ...
- Window Handle介绍
HANDLE(句柄)是Windows操作系统中的一个概念.在Windows程序中,有各种各样的资源(窗口.图标.光标等),系统在创建这些资源时会为它们分配内存,并返回标示这些资源的标示号,即句柄.句柄 ...
- matlab算法转为c语言注意事项
matlab算法转为c语言后,影响c语言效率的关键在于multiword的产生,基于此会有multiword加减法和乘除法,极大消耗资源,减少甚至消除multiword很重要,需注意的是:算法中尽量减 ...