面向对象案列

    
    
    
    
    



    

        
学生信息表
        
        

            

                学生姓名:
                

                    
                
            
            
            

                联系方式:
                

                    
                
            
            

                

                    
                         添加信息
                    
                    
                         确认编辑
                    
                
            
        
        
        









            
                
                    
学号
                    
学生姓名
                    
联系方式
                    
操作
                
            
            
        
        
暂无数据......
        
        

            

                

                    

                        
                            ×
                        
                        
您确定要删除吗？？？
                    
                    

                        取消
                        确定
                    
                
            
        

    






js代码：

(function ($) {
    var data = [{
            id: 'ID1505043900575',
            name: '小黑',
            phone: 1232222
        },
        {
            id: 'ID1505043903711',
            name: '小白',
            phone: 1233333
        },
        {
            id: 'ID1505043906767',
            name: '小花',
            phone: 1234444
        },
        {
            id: 'ID1505043941174',
            name: '小小',
            phone: 1235555
        }
    ];

    function OperateData(data) {
        this.data = data;
    }
    OperateData.prototype = {
        constructor: OperateData,
        addData: function (name, phone) {
            var data = {
                id: 'ID' + new Date().getTime(),
                name: name,
                phone: phone
            };
            this.data.push(data);
            CreateDom.prototype.creaTr.apply(this);
        },
        delData: function (index) {
            this.data.splice(index, 1);
            CreateDom.prototype.creaTr.apply(this);
            return this.data.length;
        },
        editData: function (index, id, name, phone) {
            this.data[index] = {
                id: id,
                name: name,
                phone: phone
            };
            CreateDom.prototype.creaTr.apply(this);
        },
        clearData: function () {
            this.data = [];
            CreateDom.prototype.creaTr.apply(this);
        }
    }

    function CreateDom(data) {
        this.data = data;
    }
    CreateDom.prototype.creaTr = function () {
        var str = '';
        for (var i = 0; i < this.data.length; i++) {
            str += '';
            str += '' + this.data[i].id + '';
            str += '' + this.data[i].name + '';
            str += '' + this.data[i].phone + '';
            str += '';
            str += ' 编辑 ';
            str += '';
            str += ' 删除';
            str += '';
        }
        str += '';
        str += '';
        str += ' 清空';
        str += '';
        $('#showData').html(str);
    };

    var index = 0;
    $(function () {
        var tr = new CreateDom(data);
        var oper = new OperateData(data);
        tr.creaTr();

        $('#addStuInfoBtn').on('click', function () {
            var _name = $('#inputName').val();
            var _phone = $('#inputPhone').val();
            oper.addData(_name, _phone);
            $('#inputName').val('');
            $('#inputPhone').val('');
            $('#table').show();
            $('#warning').hide();
        });

        $('#showData').on('click', '.btn-del', function () {
            index = $(this).parent().parent().index();
            $('#tips').text('您确定要删除吗？？？');
            showOrHide();
        });



        $('#showData').on('click', '.btn-edit', function () {
            index = $(this).parent().parent().index();
            var _phone = $(this).parent().prev().text();
            var _name = $(this).parent().prev().prev().text();
            $('#inputName').val(_name);
            $('#inputPhone').val(_phone);
            $('#addStuInfoBtn').hide();
            $('#confirEditBtn').show();
        });

        $('#confirEditBtn').on('click', function () {
            var _id = 'ID' + new Date().getTime();
            var _name = $('#inputName').val();
            var _phone = $('#inputPhone').val();
            oper.editData(index, _id, _name, _phone);
            showOrHide();
        });

        $('#showData').on('click', '.btn-trash', function () {
            index = -2;
            $('#tips').text('您确定要清空吗？？？');
            showOrHide();
        });

        $('#confimBtn').on('click', function () {
            if (index === -2) {
                oper.clearData();
                $('#table').hide();
                $('#warning').show();
                return;
            }
            var len = oper.delData(index);
            if (!len) {
                $('#table').hide();
                $('#warning').show();
            }
        });

        function showOrHide() {
            $('#addStuInfoBtn').show();
            $('#confirEditBtn').hide();
            $('#inputName').val('');
            $('#inputPhone').val('');
        }
    })
})(jQuery);

转载于:https://www.cnblogs.com/wen936/p/7728399.html