zoukankan      html  css  js  c++  java
  • day16

    好久没更新博客了,现在终于有时间整理,今天总结的是一个通过js来实现表格的状态编辑,主要就是使用jquery实现在html内对各种标签内容各种操作。好直接上代码,代码内做了注释。

    html

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title></title>
     6      <style>
     7      /*定义2个css类,edit-mode是单纯的美化按钮的一些设置,editing是标识类,用于后面jq操作时标识编辑按钮的状态*/
     8         .edit-mode{
     9             background-color: #b3b3b3;
    10             padding: 8px;
    11             text-decoration: none;
    12             color: white;
    13         }
    14         .editing{
    15             background-color: #f0ad4e;
    16         }
    17     </style>
    18 </head>
    19 <body>
    20     <!-- //按钮块,每个按钮都绑定了各自的jq函数 -->
    21     <div style="padding: 20px">
    22         <input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全选" />
    23 
    24 
    25 
    26         <input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反选" />
    27         <input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" />
    28 
    29         <a id="edit_mode" class="edit-mode" href="javascript:void(0);"
    30            onclick="EditMode(this, '#tb1');">进入编辑模式</a>
    31 
    32     </div>
    33 
    34 <!-- //表格部分,设置表格边框 -->
    35     <table border="1">
    36         <thead>
    37             <tr>
    38                 <th>选择</th>
    39                 <th>主机名</th>
    40                 <th>端口</th>
    41                 <th>业务</th>
    42                 <th class="tb1">状态</th>
    43             </tr>
    44         </thead>
    45         <tbody id="tb1">
    46             <tr>
    47                 <td><input type="checkbox" /></td>
    48                 <td edit="true">111 </td>
    49                 <td>v11</td>
    50                 <!-- //设置了自定义属性 -->
    51                 <td edit="true" edit-type="select" global-key="BUSINESS"  select-val="2" >二手车</td>
    52                 <td edit="true" edit-type="select" global-key="STATUS"  select-val="1" >在线</td>
    53             </tr>
    54             <tr>
    55                 <td><input type="checkbox" /></td>
    56                 <td edit="true">v1</td>
    57                 <td>v11</td>
    58                 <td edit="true" edit-type="select" global-key="BUSINESS"  select-val="3">大保健</td>
    59                 <td edit="true" edit-type="select" global-key="STATUS"  select-val="1">在线</td>
    60             </tr>
    61             <tr>
    62                 <td><input type="checkbox" /></td>
    63                 <td edit="true">v1</td>
    64                 <td>v11</td>
    65                 <td edit="true" edit-type="select" global-key="BUSINESS" select-val="3" >大保健</td>
    66                 <td edit="true" edit-type="select" global-key="STATUS" select-val="2">下线</td>
    67             </tr>
    68         </tbody>
    69     </table>
    70     <script src="js/jquery-1.8.2.min.js"></script>
    71     <script src="js/edit_row.js"></script>
    72 </body>
    73 </html>

    js

    //自定义全局变量,模拟从数据库中读取的数据
    STATUS = [
        {'id': 1, 'text': "在线"},
        {'id': 2, 'text': "下线"}
    ];
    
    BUSINESS = [
        {'id': 1, 'text': "车上会"},
        {'id': 2, 'text': "二手车"},
        {'id': 3, 'text': "大保健"}
    ];
    
    //console.log(STATUS);
    //console.log(window['STATUS']);
    
    $(function(){
        //自执行函数,jquery语法
        // checkbox默认事件优先,然后执行自定义的事件
        $('#tb1').find(':checkbox').click(function(){
            var tr = $(this).parent().parent();
            if($("#edit_mode").hasClass('editing')){
                if($(this).prop('checked')){
                    // 当前行进入编辑状态
                    RowIntoEditMode(tr);
                }else{
                    // 当前行退出编辑状态
                    RowOutEditMode(tr);
                }
            }
        });
    });
    
    
    
    
    
    
    
    function CheckAll(mode, tb){
        // 1、选中checkbox
        // 2、如果已经进入编辑模式,让选中行进入编辑状态
        // tb = #tb1  参数直接代替
        //$(tb) = $('#tb1')
        $(tb).children().each(function(){
            // $(this) 表示循环过程中,每一个tr,每一行数据
            var tr = $(this);
            //获取checkbox的状态,true or false
            var isChecked = $(this).find(':checkbox').prop('checked');
            //判断checkbox状态,如果已经选中,忽略
            if(isChecked==true){
            }else{
                //否则将checkbox状态设置为true
                $(this).find(':checkbox').prop('checked',true);
                // 如果已经进入编辑模式,让选中行进入编辑状态
                //获取编辑按钮的是否有editing类,如果有说明已经进入编辑模式
                var isEditMode = $(mode).hasClass('editing');
                if(isEditMode){
                    // 当前行进入编辑状态
                    RowIntoEditMode(tr);
                }
            }
        });
    }
    
    function CheckReverse(mode, tb){
        // 是否进入了编辑模式
        if($(mode).hasClass('editing')){
    
            $(tb).children().each(function(){
                // 遍历所有tr
                var tr = $(this);
                //筛选所有checkbox
                var check_box = tr.children().first().find(':checkbox');
                if(check_box.prop('checked')){
                    //如果此行的checkbox状态为true,并退出编辑状态
                    check_box.prop('checked',false);
                    RowOutEditMode(tr);
    
                }else{
                    //否则将checkbox状态设置为true,并进入编辑状态
                    check_box.prop('checked',true);
                    RowIntoEditMode(tr);
                }
            });
        }else{
            //如果未进入编辑状态,则只设置checkbox状态为反
            $(tb).children().each(function(){
                //遍历每一行
                var tr = $(this);
                //获取每行的checkbox
                var check_box = tr.children().first().find(':checkbox');
                if(check_box.prop('checked')){
                    //判断checkbox状态,并取反
                    check_box.prop('checked',false);
                }else{
                    check_box.prop('checked',true);
                }
            });
        }
    }
    
    function CheckCancel(mode, tb){
        // 1、取消选中checkbox
        // 2、如果已经进入编辑模式,行退出编辑状态
        $(tb).children().each(function(){
            //遍历每行tr
            var tr = $(this);
            if(tr.find(':checkbox').prop('checked')){
                // 移除选中
                tr.find(':checkbox').prop('checked', false);
                //判断编辑按钮当前是否处于编辑状态
                var isEditing = $(mode).hasClass('editing');
                if(isEditing == true){
                    // 当前行,退出编辑状态
                    RowOutEditMode(tr);
                }
            }
    
        });
    }
    
    function EditMode(ths, tb){
        // ths =this,代表这个按钮标签
        var isEditing = $(ths).hasClass('editing');
        if(isEditing){
            // 退出编辑模式,将编辑按钮的文本变更
            $(ths).text('进入编辑模式');
            //移除editing类标识
            $(ths).removeClass('editing');
            //同时检查所有行状态,如果checkbox处于选中状态,则退出编辑
            $(tb).children().each(function(){
                var tr = $(this);
                if(tr.find(':checkbox').prop('checked')){
                    // 当前行,退出编辑状态
                    RowOutEditMode(tr);
                }
            });
        }else{
            // 进入编辑模式,将按钮文本变更
            $(ths).text('退出编辑模式');
            //添加编辑状态标识的editing类
            $(ths).addClass('editing');
            $(tb).children().each(function(){
                // $(this) 表示循环过程中,每一个tr,每一行数据
                var tr = $(this);
                //判断checkbox状态,如果已经选中,则进入编辑状态
                var isChecked = $(this).find(':checkbox').prop('checked');
                if(isChecked==true){
                    // 当前行进入编辑状态
                    RowIntoEditMode(tr);
                }
            });
        }
    }
    
    //进入编辑状态的函数
    
    function RowIntoEditMode(tr){
        //tr参数,为循环的每行
        tr.children().each(function(){
            //tr的子元素遍历,其实就是td
            var td = $(this);
            //判断没个td的自定义属性edit是否为true,true为可以编辑的td
            if(td.attr('edit') == 'true'){
                //判断td的自定义属性edit-type是否为select按钮
                if(td.attr('edit-type') == "select"){
                    //通过global-key属性获取字典名,然后使用window获取字典值
                    var all_values = window[td.attr('global-key')];
                    //获取当前select-val的值,为后续操作保留值
                    var select_val = td.attr('select-val');
                    //通过parseInt函数将字符串转换成整数
                    select_val = parseInt(select_val);
                    var options = "";
                    //遍历字典里的值,作为select id和值
                    $.each(all_values, function(index, value){
                        if(select_val == value.id){
                            //这里的options是+=即为多个option选项
                            //判断进入编辑状态之前的select值,如果等于字典里的id和text值,则给option赋值,并拼接为select的option标签,设置selected状态
                            options += "<option selected='selected'>" + value.text + "</option>";
                        }else{
                            //和select_val不同的话,直接赋值给option,不设置selected属性
                            options += "<option>" + value.text + "</option>";
                        }
                    });
                    //声明temp变量为 select标签,并绑定一个onchange事件函数
                    var temp = "<select onchange='MultiChange(this);'>" + options + "</select>";
                    //将temp转换为html
                    console.log(temp)
                    td.html(temp);
                }else{
                    //不是select类型,则获取td文本,转换为input标签
                    var text = td.text();
                    var temp = "<input type='text' value='"  + text+    "' />";
                    td.html(temp);
                }
            }
        })
    }
    
    globalCtrlKeyPress = false;
    // 如果按下键盘的任意键,执行 function,检测按键状态
    window.onkeydown = function(event){
        console.log(event.keyCode);
        if(event && event.keyCode == 17){
            //监测按键号是否为ctrl建,是则变更全局变量globalCtrlKeyPress标识为true
            window.globalCtrlKeyPress = true;
        }else{
            window.globalCtrlKeyPress = false;
        }
    };
    
    function MultiChange(ths){
        // 检测是否按下ctr键
        if(window.globalCtrlKeyPress == true){
            // td所在的tr中的索引位置
            var index = $(ths).parent().index();
            //获取当前select的值
            var value = $(ths).val();
            //获取当前标签的,爷爷标签即tr,并找所有checkbox状态为true并遍历
            $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){
                //设置这些tr的索引位置的子元素的值和当前事件一样
                $(this).parent().parent().children().eq(index).children().val(value);
            });
    
        }
    }
    
    //退出编辑状态函数
    function RowOutEditMode(tr){
        //
        tr.children().each(function(){
            var td = $(this);
            if(td.attr('edit') == 'true'){
                //这里要用:first,获取已经选择的option选项
                var inp  = td.children(':first');
    
                console.log(inp)
                var input_value = inp.val();
                td.text(input_value);
            }
        });
    }

    虽然看着是一个简单的编辑表格的功能,但却需要用jq 200多行代码实现。

  • 相关阅读:
    Sumdiv POJ
    Tallest Cow POJ
    P2280 [HNOI2003]激光炸弹(二维前缀和)
    Strange Towers of Hanoi POJ
    Manjaro (KDE)安装踩坑记录
    Petya and Array CodeForces
    CodeForces
    Philosopher’s Walk(递归)
    2018 icpc 青岛网络赛 J.Press the Button
    POJ 1003: Hangover
  • 原文地址:https://www.cnblogs.com/xiaobing1024/p/5243741.html
Copyright © 2011-2022 走看看