jquery实现后台可编辑模式

需求：
1、全选、反选和取消；
2、点击进入编辑模式，已经勾选的项目会进入可编辑状态；
3、在可编辑模式下，继续勾选未选中的项目，同样会进入编辑状态，取消勾选，则不可编辑；
4、取消勾选，和点击退出编辑模式都会刷新项目内容；
5、点击退出编辑模式，所有项目都不可编辑。
实现代码如下：
<!-- jquery实现编辑模式 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table{
            text-align:center;
        }
        .active{
            background-color:orange;
        }
        .my_td{
            width:188px;
        }
    </style>
</head>
<body>
    <div class="header">
        <input type="button" value="全选">
        <input type="button" value="反选">
        <input type="button" value="取消">
        <input type="button" value="进入编辑模式">
    </div>
    <div class="content">
        <table border="1">
            <thead>
                <tr>
                    <th>选择</th>
                    <th>地址</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td class="my_td">10.0.0.1</td>
                    <td>
                        <select name="status" id="my_select">
                            <option value="yes">在线</option>
                            <option value="no">离线</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td class="my_td">10.0.0.2</td>
                    <td>
                        <select name="status" id="my_select">
                            <option value="yes">在线</option>
                            <option value="no">离线</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td class="my_td">10.0.0.3</td>
                    <td>
                        <select name="status" id="my_select">
                            <option value="yes">在线</option>
                            <option value="no">离线</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td class="my_td">10.0.0.4</td>
                    <td>
                        <select name="status" id="my_select">
                            <option value="yes">在线</option>
                            <option value="no">离线</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        //框架加载完就执行js
        $(function(){
            $(':button[value="全选"]').click(function(){
                $(':checkbox').prop('checked', true);
            });
            $(':button[value="取消"]').click(function(){
                $(':checkbox').prop('checked', false);
            });
            $(':button[value="反选"]').click(function(){
                $(':checkbox').each(function(){
                    var re = $(this).prop('checked')?false:true;
                    $(this).prop('checked', re);
                });
            });
            $(':button[value="进入编辑模式"]').click(function(){
                if($(this).hasClass('active')){
                    //退出编辑模式
                    $(this).removeClass('active');
                    $(this).prevAll().prop('disabled', false);
                    $(this).val('进入编辑模式');
                    //取消checkbox的绑定事件
                    $(':checkbox').unbind('click');
                    $('.my_input').each(function(){
                        var con = $(this).val();
                        $(this).parent().html(con);
                    });
                }else{
                    //进入编辑模式
                    $(this).addClass('active');
                    $(this).prevAll().prop('disabled', true);
                    $(this).val('退出编辑模式');
                    //循环所有checkbox，查找勾上的选项
                    $(':checkbox').each(function(){
                        //给选框绑定点击事件
                        $(this).bind('click', function(){
                            //勾上让其可编辑
                            if($(this).prop('checked') == true){
                                //获取td内容
                                var con = $(this).parent().next().text();
                                var tag = document.createElement('input');
                                $(tag).val(con).css('border', '0px').addClass('my_input');
                                $(this).parent().next().html(tag);
                            }else{             //取消勾选
                                var sel_con = $(this).parent().next().children().val();
                                $(this).parent().next().html(sel_con);
                            }
                        });

                        //循环选框更改为可编辑
                        if($(this).prop('checked') == true){
                            //获取td内容
                            var con = $(this).parent().next().text();
                            var tag = document.createElement('input');
                            $(tag).val(con).addClass('my_input');
                            $(this).parent().next().html(tag);
                        }
                    });
                }
            });

        //js结束分割线
        });
    </script>
</body>
</html>
jquery实现后台可编辑模式

推荐阅读
