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();
});
});
|
本文转自小白的希望 51CTO博客,原文链接:http://blog.51cto.com/haoyonghui/1954584
,如需转载请自行联系原作者