一、作业需求：
后台管理平台 ，编辑表格： 1. 非编辑模式： 可对每行进行选择； 反选； 取消选择 2. 编辑模式: 进入编辑模式时如果行被选中，则被选中的行万变为可编辑状态，未选中的不改变 退出编辑模式时，所有的行进入非编辑状态 处于编辑模式时，行被选中则进入编辑状态，取消选择则进入非编辑状态 二、博客地址：https://www.cnblogs.com/catepython/p/9516250.html 三、运行环境 操作系统：Win10 Python：3.6.4rcl Pycharm：2017.3.4 四、功能实现 实现功能: 1、非编辑模式 可以对每行进行选择，全选，取消，反选 ； 2、编辑模式 进入编辑模式时: 如果行被选中，则被选中的行变为可编辑状态，未选中则不改变 退出编辑模式时: 保存所有的行的修改并进入非编辑状态 单个勾选: 勾上时: 进入编辑状态 去勾时: 保存所在行的修改进入非编辑状态 全选时: 所有行进入编辑状态 取消是: 所有行保存修改进入非编辑状态 反选时: 被选中的行 取消勾选 保存修改进入非编辑状态 未被选中的行 进行勾选 进入编辑状态
一、相关知识点
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="1" 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>