1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
html代码
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title >增删改</ title >
     < link  rel = "stylesheet"  type = "text/css"  href = "css/index.css" />
     < script  src = "js/jquery-3.1.1.js" ></ script >
     < script  src = "js/index.js" ></ script >
</ head >
< body >
 
     <!--添加,全选，反选，取消按钮-->
     < div  class = "btn" >
         < input  type = "button"  value = "添加"  class = "one" />
         < input  type = "button"  value = "全选"  class = "one" />
         < input  type = "button"  value = "反选"  class = "one" />
         < input  type = "button"  value = "取消"  class = "one" />
     </ div >
     <!--结束-->
 
     <!--员工信息表-->
     < div  class = "tab" >
         < table  border = "1" >
             < tr >
                 < th >选择</ th >
                 < th >员工姓名</ th >
                 < th >员工年龄</ th >
                 < th >员工职位</ th >
                 < th >编辑</ th >
                 < th >删除</ th >
             </ tr >
 
             < tr >
                 < td >< input  type = "checkbox"  class = "checkbox" /></ td >
                 < td >alex</ td >
                 < td >38</ td >
                 < td >ceshi</ td >
                 < td >< a  class = "edit"  href = "#" >编辑</ a ></ td >
                 < td >< a  class = "delete"  href = "#" >删除</ a ></ td >
             </ tr >
 
             < tr >
                 < td >< input  type = "checkbox"  class = "checkbox" /></ td >
                 < td >egon</ td >
                 < td >38</ td >
                 < td >kaifa</ td >
                 < td >< a  class = "edit"  href = "#" >编辑</ a ></ td >
                 < td >< a  class = "delete"  href = "#" >删除</ a ></ td >
             </ tr >
 
             < tr >
                 < td >< input  type = "checkbox"  class = "checkbox" /></ td >
                 < td >wupeiqi</ td >
                 < td >38</ td >
                 < td >kaifa</ td >
                 < td >< a  class = "edit"  href = "#" >编辑</ a ></ td >
                 < td >< a  class = "delete"  href = "#" >删除</ a ></ td >
             </ tr >
 
             < tr >
                 < td >< input  type = "checkbox"  class = "checkbox" /></ td >
                 < td >yuanhao</ td >
                 < td >38</ td >
                 < td >kaifa</ td >
                 < td >< a  class = "edit"  href = "#" >编辑</ a ></ td >
                 < td >< a  class = "delete"  href = "#" >删除</ a ></ td >
             </ tr >
 
         </ table >
     </ div >
     <!--结束-->
 
     <!--遮罩-->
     < div  class = "shade hide" ></ div >
     <!--结束-->
 
     <!--弹出表单-->
     < div  class = "add_form hide" >
         < form  id = "form1"  action = "" >
             < label  for = "empname" >员工姓名:</ label >< input  type = "text"  id = "empname"  name = "empname" />< br >
             < label  for = "empage" >员工年龄:</ label >< input  type = "text"  id = "empage"  name = "empage" />< br >
             < label  for = "emp_position" >员工职位:</ label >< input  type = "text"  id = "emp_position"  name = "emp_position" />< br >
             < br >
             < input  type = "button"  value = "保存"  id = "save" />
             < input  type = "button"  value = "取消"  id = "cancel" />
         </ form >
     </ div >
 
     < div  class = "edit_form hide" >
         < form  id = "form11"  action = "" >
             < label  for = "empname1" >员工姓名:</ label >< input  type = "text"  id = "empname1"  name = "empname1" />< br >
             < label  for = "empage1" >员工年龄:</ label >< input  type = "text"  id = "empage1"  name = "empage1" />< br >
             < label  for = "emp_position1" >员工职位:</ label >< input  type = "text"  id = "emp_position1"  name = "emp_position1" />< br >
             < br >
             < input  type = "button"  value = "保存"  id = "save1" />
             < input  type = "button"  value = "取消"  id = "cancel1" />
         </ form >
     </ div >
     <!--结束-->
</ body >
</ html >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
css代码
.btn{
     margin-top:20px;
     margin-left: 400px;
}
 
.tab table{
     line-height: 40px;
     margin-left: 400px;
     margin-top: 20px;
     background-color: wheat;
     text-align: center;
     width: 600px;
}
 
.tab table a{
     text-decoration: none;
}
.tab table a:hover{
     color:red;
}
.hide{
     display: none;
}
.shade{
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: darkgray;
     opacity: 0.4;
}
 
 
 
.add_form{
     margin-left: 500px;
     margin-top: 100px;
     width: 460px;
     height: 300px;
     position: absolute;
}
 
.edit_form{
     margin-left: 500px;
     margin-top: 100px;
     width: 460px;
     height: 300px;
     position: absolute;
}
 
jquery代码
/**
  * Created by hyh on 2017/8/8.
  */
$(document).ready(function(){
    $(document).on('click','.one',function(){
 
        if($(this).val() == "添加"){
            $(".shade").removeClass("hide");
            $(".add_form").removeClass("hide");
            $(".edit_form").addClass("hide");
            $(".btn").addClass("hide");
            $(".tab").addClass("hide");
        }
        else if($(this).val() == "全选"){
             $(".checkbox").prop("checked",true);
        }
        else if($(this).val() == "反选"){
            $(".checkbox").each(function(){
                $(this).prop("checked", !$(this).prop("checked"));
            });
        }
        else{
            $(".checkbox").each(function(){
                $(this).prop("checked",false);
            });
        }
    });
 
    $(document).on('click','.edit',function(e){
        e.preventDefault();
        var inx = $(this).parent().parent().index();
        // alert(inx);
        var empname=$(this).parent().parent().children().eq(1).text();
        var empage=$(this).parent().parent().children().eq(2).text();
        var emp_position=$(this).parent().parent().children().eq(3).text();
        $("#empname1").prop("value",empname);
        $("#empage1").prop("value",empage);
        $("#emp_position1").prop("value",emp_position);
        $(".btn").addClass("hide");
        $(".tab").addClass("hide");
        $(".add_form").addClass("hide");
        $(".shade").removeClass("hide");
        $(".edit_form").removeClass("hide");
 
 
        $("#save1").click(function(){
             // alert(inx);
            empname = $("#empname1").val();
            empage = $("#empage1").val();
            emp_position = $("#emp_position1").val();
            $("table").children().children().eq(inx).children().eq(1).text(empname);
            $("table").children().children().eq(inx).children().eq(2).text(empage);
            $("table").children().children().eq(inx).children().eq(3).text(emp_position);
            $(".btn").removeClass("hide");
            $(".tab").removeClass("hide");
            $(".shade").addClass("hide");
            $(".edit_form").addClass("hide");
            $(".add_form").addClass("hide");
        });
    });
 
    $("#save").click(function(){
                var empname = $("#empname").val();
                var empage = $("#empage").val();
                var emp_position = $("#emp_position").val();
                var htmlStr='< tr >'+
                 '< td >< input  type = "checkbox"  class = "checkbox" ></ td >'+
                 '< td >'+empname+'</ td >'+
                 '< td >'+empage+'</ td >'+
                 '< td >'+emp_position+'</ td >'+
                 '< td >< a  class = "edit"  href = "#" >编辑</ a ></ td >'+
                 '< td >< a  class = "delete"  href = "#" >删除</ a ></ td >'+
             '</ tr >';
                 $("#empname").val('');
                 $("#empage").val('');
                 $("#emp_position").val('');
                $("table").append(htmlStr);
 
                $(".btn").removeClass("hide");
                $(".tab").removeClass("hide");
                $(".add_form").addClass("hide");
                $(".edit_form").addClass("hide");
                $(".shade").addClass("hide");
    });
 
    $(document).on('click','.delete',function(e){
        e.preventDefault();
        var inx = $(this).parent().parent().index();
        // alert(inx);
        $(this).parent().parent().remove();
    });
});