老男孩Day17作业：后台管理平台编辑表格
一、作业需求： 后台管理平台 ，编辑表格： 1. 非编辑模式： 可对每行进行选择； 反选； 取消选择 2. 编辑模式: 进入编辑模式时如果行被选中，则被选中的行万变为可编辑状态，未选中的不改变 退出编辑模式时，所有的行进入非编辑状态 处于编辑模式时，行被选中则进入编辑状态，取消选择则进入非编辑状态 二、博客地址：https://www.cnblogs.com/catepython/p/9516250.html 三、运行环境 操作系统：Win10 Python：3.6.4rcl Pycharm：2017.3.4 四、功能实现 实现功能:
1、非编辑模式
可以对每行进行选择，全选，取消，反选 ； 2、编辑模式
进入编辑模式时:
如果行被选中，则被选中的行变为可编辑状态，未选中则不改变
退出编辑模式时:
保存所有的行的修改并进入非编辑状态
单个勾选:
勾上时: 进入编辑状态
去勾时: 保存所在行的修改进入非编辑状态
全选时:
所有行进入编辑状态
取消是:
所有行保存修改进入非编辑状态
反选时:
被选中的行
取消勾选 保存修改进入非编辑状态
未被选中的行
进行勾选 进入编辑状态
readme
一、相关知识点
jQuery
http://jquery.cuishifeng.cn/
模块 《=》类库
DOM/BOM/JavaScript的类库
版本：
1.x 1.12
2.x
3.x
转换：
jquery对象[0] => Dom对象
Dom对象 => $(Dom对象)
一、查找元素
DOM
10左右
jQuery：
选择器，直接找到某个或者某类标签
1. id
$('#id')
2. class
<div class='c1'></div>
$(".c1")
3. 标签
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>
$('a')
4. 组合a
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>
$('a')
$('.c2')
$('a,.c2,#i10')
5. 层级
$('#i10 a') 子子孙孙
$('#i10>a') 儿子
6. 基本
:first
:last
:eq()
7. 属性
$('[alex]') 具有alex属性的所有标签
$('[alex="123"]') alex属性等于123的标签
<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>
$("input[type='text']")
$(':text')
实例：
多选，反选，全选
- 选择权
-
$('#tb:checkbox').prop('checked'); 获取值
$('#tb:checkbox').prop('checked', true); 设置值
-
jQuery方法内置循环： $('#tb:checkbox').xxxx
- $('#tb:checkbox').each(function(k){
// k当前索引
// this，DOM，当前循环的元素 $(this)
})
- var v = 条件 ? 真值 : 假值
筛选
$('#i1').next()
$('#i1').nextAll()
$('#i1').nextUntil('#ii1')
<div>
<a>asdf</a>
<a>asdf</a>
<a id='i1'>asdf</a>
<a>asdf</a>
<a id='ii1'>asdf</a>
<a>asdf</a>
</div>
$('#i1').prev()
$('#i1').prevAll()
$('#i1').prevUntil('#ii1')
$('#i1').parent()
$('#i1').parents()
$('#i1').parentsUntil()
$('#i1').children()
$('#i1').siblings()
$('#i1').find()
$('li:eq(1)')
$('li').eq(1)
first()
last()
hasClass(class)
文本操作：
$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容
$(..).html()
$(..).html("<a>1</a>")
$(..).val()
$(..).val(..)
样式操作：
addClass
removeClass
toggleClass
属性操作：
# 专门用于做自定义属性
$(..).attr('n')
$(..).attr('n','v')
$(..).removeAttr('n')
<input type='checkbox' id='i1' />
# 专门用于chekbox,radio
$(..).prop('checked')
$(..).prop('checked', true)
PS:
index 获取索引位置
文档处理：
append
prepend
after
before
remove
empty
clone
css处理
$('t1').css('样式名称', '样式值')
点赞：
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 》 0
- position
- 字体大小，位置
位置：
$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
scrollLeft([val])
offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标
position() 指定标签相对父标签(relative)标签的坐标
<div style='relative'>
<div>
<div id='i1' style='position:absolute;height:80px;border:1px'></div>
</div>
</div>
$('i1').height() # 获取标签的高度 纯高度
$('i1').innerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight(true) # 获取边框 + 纯高度 + ？
# 纯高度，边框，外边距，内边距
事件
DOM： 三种绑定方式
jQuery：
$('.c1').click()
$('.c1').....
$('.c1').bind('click',function(){
})
$('.c1').unbind('click',function(){
})
*******************
$('.c').delegate('a', 'click', function(){
})
$('.c').undelegate('a', 'click', function(){
})
$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})
阻止事件发生
return false
# 当页面框架加载完成之后，自动执行
$(function(){
$(...)
})
jQuery扩展：
- $.extend $.方法
- $.fn.extend $(..).方法
(function(){
var status = 1;
// 封装变量
})(jQuery)
二、操作元素
===》实例：
作业：
一：
$('i1').height() # 获取标签的高度 纯高度
$('i1').innerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight(true) # 获取边框 + 纯高度 + ？
# 纯高度，边框，外边距，内边距
二、所有实例敲一遍
三、编辑框
重要笔记
二、核心代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.title{
height: 50px;
margin-left: 100px;
}
.d1{
height: 30px;
width: 150px;
background-color: #969696;
display: inline-block;
text-align: center;
line-height: 30px;
color: white;
cursor: pointer;
}
.d1_change{
height: 30px;
width: 150px;
background-color: yellowgreen;
display: inline-block;
text-align: center;
line-height: 30px;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div class="title">
<input type="button" value="全选"/>
<input type="button" value="反选"/>
<input type="button" value="取消"/>
<div class="d1">进入编辑模式</div>
</div>
<table border="" id = 't1'>
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>v1</td>
<td>v11</td>
<td class="t3">
下线
</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>v2</td>
<td>v22</td>
<td class="t3">
在线
</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>v3</td>
<td>v33</td>
<td class="t3" >
在线
</td>
</tr>
</tbody>
</table>
<script src="jquery1.12.4.js"></script>
<script>
$(function () {
var checkbox = $("#t1 tbody tr td input[type = 'checkbox']");
$("#t1 tbody tr td").delegate("input[type = 'checkbox']",'click',function () {
//单击checkbox函数并传参给Edit函数
$(this).each(function () {
Edit($(this));
})
}); function Edit(self) {
//判断是否已进入编辑模式
if(self.prop('checked') && $('.d1').attr('as')){
// console.log(self + " Edit() 已进入编辑模式 checked = true" );
af(self);
}else if(self.prop('checked')===false && $('.d1').attr('as')){
// console.log(self + " Edit() 已进入编辑模式 且 checked = false" );
df(self);
}
} $('.d1').click(function () {
//点击 "编辑按钮"选择是否进入编辑模式
$(this).toggleClass('d1_change');
if($(this).hasClass('d1_change')) {
$(this).attr('as','on'); //已进入编辑模式后 新增该标签 as = on 属性
checkbox.each(function () {
if($(this).prop('checked')){
// console.log($(this) + "click() 已进入编辑模式 checked = true" );
af($(this));
}
})
}else {
$(this).removeAttr('as'); //取消进入编辑模式后 删除该标签 as = on 属性 并执行 df() 函数
checkbox.each(function () {
if($(this).prop('checked')){
$(this).prop('checked',false);
df($(this));
}
})
}
}); // function af(self) {
// //checked=true 且 已进入编辑模式后 执行该函数
// //对可编辑框进行相应操作
// var v = $(self).parent().next().text();
// var td = $(self).parent().next();
// td.empty(); //删除<td>标签中的内容 <input type=text/ >
// var tag = document.createElement('input'); //新增input标签
// tag.type = 'text';
// tag.value = v; //将input标签文本赋值
// td.append(tag);
// D_box(self);
// }
// function df(self) {
// //checked=false 或 未进入编辑模式后 执行该函数
// //对可编辑框进行相应操作
// var v = self.parent().next().children().val();
// var td = self.parent().next();
// td.empty();
// td.append(v);
// P_box(self);
// }
function af(self) {
//checked=true 且 已进入编辑模式后 执行该函数
//对可编辑框进行相应操作
var td = $(self).parent().nextUntil('.t3');
td.each(function () {
var v = $(this).text();
$(this).empty();
$(this).append("<input type='text' value='"+v+"'>");
});
D_box(self); //调用下拉框函数
} function df(self) {
//checked=false 或 未进入编辑模式后 执行该函数
//对可编辑框进行相应操作
var td = $(self).parent().nextUntil('.t3');
td.each(function () {
var v = $(this).find('input').val();
$(this).find('input').remove('input');
$(this).text(v);
});
P_box(self); //调用取消下拉框函数
} $('.title').delegate("input[value = '全选']",'click',function () {
checkbox.each(function () {
if($(this).prop('checked')===false){ //只将checked=false的变为true,防止原先checked=true的标签
$(this).prop('checked',true); //再次被选中并更改原先样式
Edit($(this));
}
})
});
$("input[value = '反选']").click(function () {
checkbox.each(function () {
if($(this).prop('checked')){
$(this).prop('checked',false);
Edit($(this));
}else {
$(this).prop('checked',true);
Edit($(this));
}
})
});
$("input[value = '取消']").click(function () {
checkbox.each(function () {
if($(this).prop('checked')){
$(this).prop('checked',false);
Edit($(this));
}
})
});
function D_box(self) {
//下拉框处理函数
var select = self.parent().next().next().next();
select.empty();
var tag = "<select>\n"+"<option>上线</option>\n"+"<option>下线</option>\n"+" </select>";
select.append(tag);
}
function P_box(self) {
//删除下拉框select标签函数
var select = self.parent().next().next().next();
var v = $('select option:selected').val(); //获取select标签的选中值
select.empty();
select.append(v);
}
})
</script>
</body>
</html>
核心代码
老男孩Day17作业：后台管理平台编辑表格的更多相关文章
- vue2.0+elementUI构建单页面后台管理平台
git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...
- 一个小型的CMS后台管理平台发布啦～
由于我不太懂怎么把博客园里我上传的文件共享,所以只好先放到百度网盘里了 数据库和发布的网站都放在这里 http://pan.baidu.com/s/1eQw3DOA 有问题请参考以下链接: http: ...
- day16-作业 后台管理
二话不说开撸作业 作业要求: 后台管理平台 ,编辑表格:1. 非编辑模式:可对每行进行选择: 反选: 取消选择2. 编辑模式:进入编辑模式时如果行被选中,则被选中的行万变为可编辑状态,未选中的不改变退 ...
- 一步步学习Python-django开发-添加后台管理
Pyhon-djano提供了一个很强大的后台管理功能,你很轻松的就可以拥有一个后台管理平台.你需要做啥呢?你只需要将需要管理员进行管理的表注册到管理site中即可: from django.contr ...
- go语言实战教程之 后台管理页面统计功能开发（1）
本节内容我们将学习开发实现后台管理平台页面统计功能开发的功能接口,本章节内容将涉及到多种请求路由的方式. 功能介绍 后台管理平台不仅是功能管理平台,同时还是数据管理平台.从数据管理平台角度来说,在管理 ...
- NETCore Bootstrap Admin 通用后台管理权限 [3]: 精简版任务调度模块
前言 NETCore 里说到任务调度,大家首先想到的应该是大名鼎鼎的 QuartzNET 与 Hangfire,然而本篇介绍的却都不是,而是 Bootstrap Admin(以下简称 BA)通用后台权 ...
- GitHub开源的10个超棒后台管理面板
目录1.AdminLTE 2.vue-Element-Admin 3.tabler 4.Gentelella 5.ng2-admin 6.ant-design-pro 7.blur-admin 8.i ...
- 老男孩Day16作业：登录、注册、后台管理页面（动态）
一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面 二.博客地址:https://www.cnblogs.com/catepython/p/93 ...
- 老男孩Day18作业：后台用户管理
一.作业需求: 1.用户组的增删改查 2.用户增删该查 - 添加必须是对话框 - 删除必须是对话框 - 修改,必须显示默认值 3.比较好看的页面 二.博客地址:https://www.cnblogs. ...
随机推荐
- GY89的使用
GY89集成了三块不同的芯片,分别为:BMP180.L3GD20和LSM303DLH,作用分别是获取温度压强.三轴陀螺仪和加速度计的数据.以下通过把各个模块的数据输出到终端来测试GY89的功能. #i ...
- 动态规划——最长不下降子序列（LIS）
最长不降子序列是这样一个问题: 下面介绍动态规划的做法. 令 dp[i] 表示以 A[i] 结尾的最长不下降序列长度.这样对 A[i] 来说就会有两种可能: 如果存在 A[i] 之前的元素 A[j] ...
- 【291】Python 中字符串添加到剪贴板
参考:如何使用Python将字符串复制到Windows上的剪贴板上? 实现代码如下: from Tkinter import Tk r = Tk() r.withdraw() r.clipboard_ ...
- collections、time和datetime模块
主要内容: 一.collections模块 二.time模块 三.datetime模块 1️⃣ collection模块 1.什么是collections模块.干什么用? collections模块 ...
- 闲来无事，做做Google：21 道能力倾向测试面试题
1. Solve this cryptic equation, realizing of course that values for Mand E could be interchanged. No ...
- Select2 的使用
实现这个下拉列表框 下载这两个官网上的CSS,JS 官网地址 https://select2.org/getting-started/installation 我自己存的高速下载地址 http://y ...
- Windows下Memcached的安装配置方法
1.将第一个包解压放某个盘下面,比如在c:\memcached. 2.在终端(也即cmd命令界面)下输入 'c:\memcached\memcached.exe -d install' 安装. 3.再 ...
- c语言实践 创建两个包含8个元素的double类型数组，第二个元素的每个元素的值都是对应前一个元素的前n个元素的和
意思就是第二个元素的num[2]等于第一个元素的num[0]+num[1]+num[2] #define COUNT 8 int main(void) { double num1[COUNT]; do ...
- hdu 4277 USACO ORZ （Dfs）
题意: 给你n个数,要你用光所有数字组成一个三角形,问能组成多少种不同的三角形 时间分析: 3^15左右 #include<stdio.h> #include<set> usi ...
- js 二维数组排序sort()函数
一.按数值排序 var arr = [[1, 2, 3], [7, 2, 3], [3, 2, 3]]; arr.sort(function(x, y){ return x[0] – y[0];}) ...