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 网站开发之二 ...
随机推荐
- C/C++开发android应用
(转自:http://blog.csdn.net/srplab1/article/details/7617963) 在某些情况下,比如原来与很多c/c++的代码, 可能希望采用c/c++编写andro ...
- ARM汇编指令集4
协处理器cp15操作指令: mcr & mrc •mrc用于读取CP15中的寄存器 •mcr用于写入CP15中的寄存器 什么是协处理器? •SoC内部另一处理核心,协助主CPU实现某些功能 ...
- 软工15个人作业4——alpha阶段
一.个人总结 1.在alpha 结束之后, 每位同学写一篇个人博客, 总结自己的alpha 过程: 2.请用自我评价表:http://www.cnblogs.com/xinz/p/3852177.ht ...
- poscms用法总结（非定制开发，不涉及后台代码）
这些天几个企业站仿下来,对poscms的用法多少有些了解了,在这个记录一下,好记性不如烂笔头嘛. 1.静态文件目录和模板文件目录 这两个目录分别放置css/js/image等静态文件和html模板文件 ...
- HAWQ取代传统数仓实践（十五）——事实表技术之无事实的事实表
一.无事实事实表简介 在多维数据仓库建模中,有一种事实表叫做"无事实的事实表".普通事实表中,通常会保存若干维度外键和多个数字型度量,度量是事实表的关键所在.然而在无事实的事实表中 ...
- Android 进阶9：进程通信之 AIDL 解析
读完本文你将了解: AIDL AIDL 生成文件分析 Stub Proxy AIDL 生成的内容小结 AIDL 的使用回顾 服务端 客户端 小结 手动写个 Binder 首先是定义跨进程接口实现 II ...
- SOA的挑战：实体集合【转】
SOA的挑战:实体集合 发布日期 : 2005-11-06 | 更新日期 : 2005-11-06 Ramkumar Kothandaraman 微软公司 适用于: Microsoft® Visua ...
- serf 简单使用
1. 介绍 // 以下为官方介绍,说白了就是进行系统的集群节点管理 Serf uses an efficient gossip protocol to solve three major proble ...
- 委托的N种写法
一.委托调用方式 1. 最原始版本: delegate string PlusStringHandle(string x, string y); class Program { static void ...
- C# 实现程序只启动一次(实现程序自重启)
程序运行过程中,不能有多个实例运行,并且需要程序自己可以重启(重新运行),所以代码如果下代码: static void Main() { bool createNew; using (System.T ...