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 网站开发之二 ...
随机推荐
- win+D可以最小化所有窗口，显示桌面 win+E可以快速打开我的电脑 这两个对我来说非常常用,要用熟练,节约时间
win+D可以最小化所有窗口,显示桌面 win+E可以快速打开我的电脑
- windows下Perl如何读取大文件的最后一行(总结)
Perl中读取文件最后一行的方法很多,比如 (1)将文件读入数组,取最后一个元素 open (FILE,"file.txt") or die "$!"; my ...
- Flask中的ORM使用
前言 ORM拓展 安装 数据库设置 使用 关系 单表操作 建表 应用表结构 CRUD 添加查找操作 更新操作 删除操作 一对多 多对多 总结 前言 最近几天接触了一下Flask,在惊叹于其简洁性的同时 ...
- ajax函数里不能用this调用
ajax函数里不能用this调用,想用的话,在ajax外面弄个变量var mythis = $(this),然后在里面用就行了 因为,在ajax方法里写$(this)指向的是最近调用它的jquery对 ...
- ajax 提交 注册表单 到MySQL数据库
今天按照要求,要做一个登陆.注册表单,本来样式做好就行了,本来咱就是干前端的,但让咱自己都没想到的是,不到一个小时竟然都干完了,实在闲的蛋疼,就想到链接数据库玩,遥想当年,毕竟咱也是写过后台的,哪知, ...
- 从无到有开发自己的Wordpress博客主题---主页模板
在只做完成了header和footer的模板之后,我们首先在之前Hello World的基础上做一个最简单的调用测试 //修改index.php内容如下 <?php get_header(); ...
- 无线网破解 跑字典 EWSA使用教程
当我们用奶瓶抓到包,就可以再windowsxp&7&8下跑字典 工具/原料 EWSA4.0完美汉化破解版 字典 方法/步骤 1.打开程序 2.导入握手包 3.配置EWSA ,1.选项 ...
- Quartz 2D编程指南(1) － 概览
Quartz 2D编程指南是论坛会员德鲁伊翻译的国外的Quartz 2D一系列学习资料,供大家参考 Quartz 2D是一个二维图形绘制引擎,支持iOS环境和Mac OS X环境.我们可以使用Quar ...
- 【msdn】RESTful 服务（配备 WCF）介绍
原文地址:http://msdn.microsoft.com/zh-cn/magazine/dd315413.aspx RESTful 服务(配备 WCF)介绍 Jon Flanders 代码下载位置 ...
- CSS3的圆角border-radius属性
一,语法解释 border-radius : none | <length>{1,4} [/ <length>{1,4} ] <length>: 由浮点数字和单位标 ...