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 网站开发之二 ...
随机推荐
- Qt 组合键的实现
(转自:http://blog.csdn.net/zerokkqq/article/details/6686912) CTRL+Enter发送信息的实现 在现在的即时聊天程序中,一般都设置有快捷键来实 ...
- 【Wannafly挑战赛9-B】数一数
链接:https://www.nowcoder.net/acm/contest/71/B 题目就不贴了.. 设res[i]为第i行的最终结果,可以想到,res[i]为0或不为0.长度不是最短的字符串r ...
- Ubuntu窗口大小调节方法
Description: 在Vmware Workstation 11上安装了Ubuntu 10.0,画面显示如下所示: Ubuntu系统的屏幕太小.调整方法:调节显示器分辨率即可,下图是将分辨率调节 ...
- OC-Foundation框架
========================== Foundation框架下的常用类 ========================== 一.[NSNumber]================ ...
- request.setAttribute("username", username);//一定要保存,OGNL才能获取${username}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, ...
- Linux系统下的shutdown命令用于安全的关闭/重启计算机
Linux系统下的shutdown命令用于安全的关闭/重启计算机,它不仅可以方便的实现定时关机,还可以由用户决定关机时的相关参数.在执行shutdown命令时,系统会给每个终端(用户)发送一条屏显,提 ...
- [置顶]
Xposed也要热更新
好久没写博客了.这次玩一点不一样的. 吐槽&起因 相信熟悉Xposed的小伙伴们都知道,每次写完Xposed都要重启啊!有木有!反射错了,写错了名字,改一个log,都要重启啊有木有!重启浪费时 ...
- 4.CRT远程连接的使用
目录: 1.为什么需要远程连接? 2.一般的远程连接工具有哪些? 3.远程连接的原理? 4.远程连接的软件的功能和使用相关技巧? 1.为什么选择远程连接? 因为在实际工作中,机房一般都不可能在办公室, ...
- Go语言开发中MongoDB数据库
伴随着移动端的兴起,Nosql数据库以其分布式设计和高性能等特点得到了广泛的应该用,下面将介绍下Nosql中的mongoDB在Go语言中的应用,在开发前,有必要了解下基础知识 在开发前,导入开发需要用 ...
- 通过ssh限制ip访问
方法:在/etc/hosts.allow中加入允许的ip,并禁止其他ip sshd:192.168.1.22:allow sshd:ALL:deny 不需要修改/etc/hosts.deny