一、作业需求: 后台管理平台 ,编辑表格: 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>
核心代码