老男孩Day17作业：后台管理平台编辑表格

一、作业需求：

后台管理平台 ，编辑表格：

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;
             150px;
            background-color: #969696;
            display: inline-block;
            text-align: center;
            line-height: 30px;
            color: white;
            cursor: pointer;
        }
        .d1_change{
            height: 30px;
             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>
"+"<option>上线</option>
"+"<option>下线</option>
"+" </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>