Skip to content

Commit 293c178

Browse files
TakeMeHigherTakeMeHigher
committed
jsjquerytest
0 parents  commit 293c178

36 files changed

Lines changed: 13572 additions & 0 deletions

‎jsJquery/1.html‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
<div class="shade hide"></div>
2+
<div class="container add_model hide">
3+
<div class="row">
4+
<div class="col-md-8 col-md-offset-2">
5+
<div class="panel panel-default">
6+
<div class="panel-heading" style="background-color: #2e6da4">
7+
<h3 class="panel-title">基本信息</h3>
8+
9+
</div>
10+
<div class="panel-body" style="border: 1px solid #337ab7">
11+
<div class="row">
12+
<div class="col-md-10">
13+
<form class="form-horizontal">
14+
15+
<div class="form-group">
16+
<label for="addNumber" class="col-sm-3 control-label">编号</label>
17+
<div class="col-sm-9">
18+
<input type="text" class="form-control" id="addNumber" placeholder="Number">
19+
</div>
20+
</div>
21+
22+
23+
<div class="form-group">
24+
<label for="addName" class="col-sm-3 control-label">用户名</label>
25+
<div class="col-sm-9">
26+
<input type="text" class="form-control" id="addName" placeholder="Name">
27+
</div>
28+
</div>
29+
<div class="form-group">
30+
<label for="addEmail" class="col-sm-3 control-label">邮箱</label>
31+
<div class="col-sm-9">
32+
<input type="email" class="form-control" id="addEmail" placeholder="Email">
33+
</div>
34+
</div>
35+
<div class="form-group">
36+
<label for="addHoppy" class="col-sm-3 control-label">爱好</label>
37+
<div class="col-sm-9">
38+
<input type="text" class="form-control" id="addHoppy" placeholder="Hoppy">
39+
</div>
40+
</div>
41+
42+
<button type="button" class="btn btn-info" id="add_btn_sub" style="margin-left: 300px">
43+
提交
44+
</button>
45+
</form>
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
53+
</div>
54+
<div class="container update_model hide">
55+
<div class="row">
56+
<div class="col-md-8 col-md-offset-2">
57+
<div class="panel panel-default">
58+
<div class="panel-heading" style="background-color: #2e6da4">
59+
<h3 class="panel-title">基本信息</h3>
60+
61+
</div>
62+
<div class="panel-body" style="border: 1px solid #337ab7">
63+
<div class="row">
64+
<div class="col-md-10">
65+
<form class="form-horizontal">
66+
<div class="form-group">
67+
<label for="updateName" class="col-sm-3 control-label">用户名</label>
68+
<div class="col-sm-9">
69+
<input type="text" class="form-control" id="updateName" placeholder="Name">
70+
</div>
71+
</div>
72+
<div class="form-group">
73+
<label for="updateEmail" class="col-sm-3 control-label">邮箱</label>
74+
<div class="col-sm-9">
75+
<input type="email" class="form-control" id="updateEmail" placeholder="Email">
76+
</div>
77+
</div>
78+
<div class="form-group">
79+
<label for="updateHoppy" class="col-sm-3 control-label">爱好</label>
80+
<div class="col-sm-9">
81+
<input type="text" class="form-control" id="updateHoppy" placeholder="Hoppy">
82+
</div>
83+
</div>
84+
85+
<button type="button" class="btn btn-info" id="update_btn_sub"
86+
style="margin-left: 300px">提交修改
87+
</button>
88+
</form>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
96+
</div>
97+
98+
99+
100+
<script>
101+
$("#add_btn").on("click", function () {
102+
$(".shade").removeClass("hide");
103+
$(".add_model").removeClass("hide");
104+
$("#main_div").addClass("hide")
105+
});
106+
107+
$("#add_btn_sub").on("click", function () {
108+
var number = $("#addNumber").val();
109+
var username = $("#addName").val();
110+
var email = $("#addEmail").val();
111+
var hobby = $("#addHoppy").val();
112+
113+
var $tr = $("<tr></tr>");
114+
var $td1 = $("<td></td>");
115+
var $td2 = $("<td></td>");
116+
var $td3 = $("<td></td>");
117+
var $td4 = $("<td></td>");
118+
var $td5 = $("<td></td>");
119+
120+
$td1.text(number);
121+
$td2.text(username);
122+
$td3.text(email);
123+
$td4.text(hobby);
124+
125+
var $out_div = $("<div class='text-center'></div>");
126+
127+
var $inner_div = $("<div class='btn-group' role='group' ></div>");
128+
129+
var $btn1 = $("<button type='button' class='btn btn-success update_btn'>编辑</button>&nbsp;&nbsp;&nbsp;");
130+
131+
var $btn2 = $("<button type='button' class='btn btn-danger del_btn'>删除</button>");
132+
133+
var $span1 = $("<span class='glyphicon glyphicon-pencil'></span>");
134+
135+
var $span2 = $(" <span class='glyphicon glyphicon-remove'></span>");
136+
137+
$btn1.prepend($span1);
138+
$btn2.prepend($span2);
139+
140+
$inner_div.append($btn1);
141+
$inner_div.append($btn2);
142+
143+
$out_div.append($inner_div);
144+
145+
$td5.append($out_div);
146+
147+
148+
$tr.append($td1);
149+
$tr.append($td2);
150+
$tr.append($td3);
151+
$tr.append($td4);
152+
$tr.append($td5);
153+
154+
$("#tbody").append($tr);
155+
156+
157+
$(".shade").addClass("hide");
158+
$(".add_model").addClass("hide");
159+
$("#main_div").removeClass("hide");
160+
161+
$(".del_btn").on("click", function () {
162+
$(this).parentsUntil("tbody").empty()
163+
});
164+
165+
$(".update_btn").on("click", function () {
166+
$(".shade").removeClass("hide");
167+
$(".update_model").removeClass("hide");
168+
$("#main_div").addClass("hide");
169+
170+
$tr = $(this).parentsUntil("tbody").filter("tr");
171+
$tds = $tr.children();
172+
$td_name = $tds.eq(1);
173+
$td_email = $tds.eq(2);
174+
$td_hobby = $tds.eq(3);
175+
176+
$("#updateName").val($td_name.text());
177+
$("#updateEmail").val($td_email.text());
178+
$("#updateHoppy").val($td_hobby.text());
179+
180+
181+
$("#update_btn_sub").on("click", function () {
182+
$td_name.text($("#updateName").val());
183+
$td_email.text($("#updateEmail").val());
184+
$td_hobby.text($("#updateHoppy").val());
185+
$(".shade").addClass("hide");
186+
$(".update_model").addClass("hide");
187+
$("#main_div").removeClass("hide");
188+
189+
190+
});
191+
192+
});
193+
});
194+
</script>
195+
196+
<script>
197+
$(".del_btn").on("click", function () {
198+
$(this).parentsUntil("tbody").empty()
199+
});
200+
</script>
201+
202+
<script>
203+
204+
205+
$(".update_btn").on("click", function () {
206+
$(".shade").removeClass("hide");
207+
$(".update_model").removeClass("hide");
208+
$("#main_div").addClass("hide");
209+
210+
$tr = $(this).parentsUntil("tbody").filter("tr");
211+
$tds = $tr.children();
212+
$td_name = $tds.eq(1);
213+
$td_email = $tds.eq(2);
214+
$td_hobby = $tds.eq(3);
215+
216+
$("#updateName").val($td_name.text());
217+
$("#updateEmail").val($td_email.text());
218+
$("#updateHoppy").val($td_hobby.text());
219+
220+
221+
$("#update_btn_sub").on("click", function () {
222+
$td_name.text($("#updateName").val());
223+
$td_email.text($("#updateEmail").val());
224+
$td_hobby.text($("#updateHoppy").val());
225+
$(".shade").addClass("hide");
226+
$(".update_model").addClass("hide");
227+
$("#main_div").removeClass("hide");
228+
229+
230+
});
231+
232+
});
233+
234+
235+
</script>

‎jsJquery/1.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
$("#tbody").on("click", ".edit_btn", function () {
2+
$("#myModal").modal("show");
3+
$("#btn_sub").text("saveUpdate");
4+
var tds = $(this).parent().parent().parent().parent().children("td").slice(0,4);
5+
var attr = [];
6+
tds.each(function () {
7+
var tdText = $(this).text();
8+
attr.push(tdText)
9+
});
10+
11+
var modalInputs = $(".addMsg");
12+
var i = 0;
13+
modalInputs.each(function () {
14+
$(this).val(attr[i]);
15+
i++;
16+
});
17+
18+
$("#btn_sub").on("click", function () {
19+
var ar=[];
20+
21+
$(".addMsg").each(function () {
22+
ar.push($(this).val());
23+
24+
});
25+
var i = 0;
26+
27+
28+
29+
tds.each(function () {
30+
31+
$(this).text(ar[i]);
32+
i++
33+
});
34+
35+
$("#myModal").modal("hide");
36+
37+
});
38+
39+
});
40+
//
41+
// var tds= $(this).parent().parent().parent().parent().children("td").slice(0,4);
42+
// tds.each(function () {
43+
// //alert($(this).text())
44+
// $(this).html("<input type='text' value=" + $(this).text() + ">")
45+
// });
46+
// $(this).text("保存");
47+
//
48+
//
49+
// $(this).removeClass("btn btn-success edit_btn");
50+
// $(this).addClass("btn btn-info saveBtn");

0 commit comments

Comments
 (0)