1 <!DOCTYPE html>
2 <!-- saved from url=(0041)http://v3.bootcss.com/examples/dashboard/ -->
3 <html lang="zh-CN">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6
7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 <meta name="viewport" content="width=device-width, initial-scale=1">
9 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
10 <meta name="description" content="">
11 <meta name="author" content="">
12 <link rel="icon" href="http://v3.bootcss.com/favicon.ico">
13
14 <title>Dashboard Template for Bootstrap</title>
15
16 <!-- Bootstrap core CSS -->
17 <link href="./Dashboard_files/bootstrap.min.css" rel="stylesheet">
18
19 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
20 <link href="./Dashboard_files/ie10-viewport-bug-workaround.css" rel="stylesheet">
21
22 <!-- Custom styles for this template -->
23 <link href="./Dashboard_files/dashboard.css" rel="stylesheet">
24
25 <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
26 <!--[if lt IE 9]>
27 <script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
28 <script src="Dashboard_files/ie-emulation-modes-warning.js"></script>
29
30 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
31 <!--[if lt IE 9]>
32 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
33 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
34 <![endif]-->
35
36
37 <style>
38 .menu {
39 margin: 0 -20px;
40 border-bottom: 1px solid #336699;
41 }
42
43 .head {
44 padding: 15px;
45 }
46
47 .my-table-tool {
48 margin-bottom: 15px;
49 }
50
51 .menu .nav-sidebar > li > a {
52 padding-right: 40px;
53 padding-left: 40px;
54 }
55
56 .input_color {
57 border-color: #f66495;
58 }
59
60 .text_color {
61 color: #f66495;
62 }
63 </style>
64
65 </head>
66
67 <body>
68
69 <nav class="navbar navbar-inverse navbar-fixed-top">
70 <div class="container-fluid">
71 <div class="navbar-header">
72 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
73 aria-expanded="false" aria-controls="navbar">
74 <span class="sr-only">Toggle navigation</span>
75 <span class="icon-bar"></span>
76 <span class="icon-bar"></span>
77 <span class="icon-bar"></span>
78 </button>
79 <a class="navbar-brand" href="http://v3.bootcss.com/examples/dashboard/#">Project name</a>
80 </div>
81 <div id="navbar" class="navbar-collapse collapse">
82 <ul class="nav navbar-nav navbar-right">
83
84 <li><a href="http://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
85 <li><a href="http://v3.bootcss.com/examples/dashboard/#">Settings</a></li>
86 <li><a href="http://v3.bootcss.com/examples/dashboard/#">Profile</a></li>
87 <li><a href="http://v3.bootcss.com/examples/dashboard/#">Help</a></li>
88 <li><a href="" data-toggle="modal" data-target="#myModal2">登录</a></li>
89 <li><a href="">注册</a></li>
90
91 </ul>
92 <form class="navbar-form navbar-right">
93 <input type="text" class="form-control" placeholder="Search...">
94 </form>
95 </div>
96 </div>
97 </nav>
98
99 <div class="container-fluid">
100 <div class="row">
101 <div class="col-sm-3 col-md-2 sidebar">
102
103 <div class="menu">
104 <div class="head bg-primary">菜单一</div>
105 <ul class="nav nav-sidebar">
106 <li class=""><a href="http://v3.bootcss.com/examples/dashboard/#">Overview <span
107 class="sr-only">(current)</span></a>
108 </li>
109 <li><a href="http://v3.bootcss.com/examples/dashboard/#">Reports</a></li>
110 <li><a href="http://v3.bootcss.com/examples/dashboard/#">Analytics</a></li>
111 <li><a href="http://v3.bootcss.com/examples/dashboard/#">Export</a></li>
112 </ul>
113 </div>
114
115 <div class="menu">
116 <div class="head bg-primary">菜单二</div>
117 <ul class="nav nav-sidebar">
118 <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item</a></li>
119 <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
120 <li><a href="http://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
121 <li><a href="http://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
122 <li><a href="http://v3.bootcss.com/examples/dashboard/">More navigation</a></li>
123 </ul>
124 </div>
125
126 <div class="menu">
127 <div class="head bg-primary">菜单三</div>
128 <ul class="nav nav-sidebar">
129 <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
130 <li><a href="http://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
131 <li><a href="http://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
132 </ul>
133 </div>
134
135
136 </div>
137 <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
138
139 <div class="panel panel-primary">
140 <div class="panel-heading">Panel heading without title</div>
141 <div class="panel-body">
142
143 <!-- 表格上面的按钮-->
144
145 <div class="row my-table-tool">
146 <div class="col-md-12">
147 <button class="btn btn-success" data-toggle="modal" data-target="#myModal">添加</button>
148 </div>
149 </div>
150
151 <div class="table-responsive table-bordered">
152 <table class="table table-striped">
153 <thead>
154 <tr>
155 <th>#</th>
156 <th>姓名</th>
157 <th>年龄</th>
158 <th>性别</th>
159 <th>操作</th>
160
161 </tr>
162 </thead>
163 <tbody>
164 <tr>
165 <td>1</td>
166 <td class="col-md-3">ldq</td>
167 <td class="col-md-3">15</td>
168 <td class="col-md-3">
169 男
170 </td>
171 <td>
172 <button class="btn del_but btn-danger">删除</button>
173 <button class="btn alter_but btn-primary">更改</button>
174 </td>
175 </tr>
176
177
178 </tbody>
179 </table>
180 </div>
181 </div>
182 </div>
183
184
185 </div>
186 </div>
187 </div>
188
189 <!--添加数据Modal-->
190 <div id="myModal" class="modal fade " tabindex="-1" role="dialog">
191 <div class="modal-dialog modal-lg" role="document">
192 <div class="modal-content">
193 <div class="modal-header">
194 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
195 </button>
196 <h4 class="modal-title">Modal title</h4>
197 </div>
198 <div class="modal-body">
199 <form class="form-horizontal">
200 <div class="form-group">
201 <label for="name" class="col-sm-2 control-label">姓名</label>
202 <div class="col-sm-10">
203 <input type="email" class="form-control item" id="name" placeholder="name">
204 </div>
205 </div>
206 <div class="form-group">
207 <label for="age" class="col-sm-2 control-label">年龄</label>
208 <div class="col-sm-10">
209 <input type="email" class="form-control item" id="age" placeholder="age">
210 </div>
211 </div>
212 <div class="form-group">
213 <label for="sex" class="col-sm-2 control-label">性别</label>
214 <div class="col-sm-10">
215 <input type="email" class="form-control item" id="sex" placeholder="sex">
216 </div>
217 </div>
218
219
220 </form>
221 </div>
222 <div class="modal-footer">
223 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
224 <button type="button" class="btn btn-primary">提交</button>
225 </div>
226 </div><!-- /.modal-content -->
227 </div><!-- /.modal-dialog -->
228 </div><!-- /.modal -->
229 <!-- 登录Modal -->
230 <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
231 <div class="modal-dialog modal-lg" role="document">
232 <div class="modal-content">
233 <div class="modal-header">
234 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
235 </button>
236 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
237 </div>
238 <div class="modal-body">
239 <form class="form-horizontal">
240 <div class="form-group">
241 <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
242
243 <div class="col-sm-10">
244 <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
245
246 <p class="none_add_text"></p>
247 </div>
248 </div>
249 <div class="form-group">
250 <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
251
252 <div class="col-sm-10">
253 <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
254 <p class="none_add_text"></p>
255 </div>
256 </div>
257 <div class="form-group">
258 <div class="col-sm-offset-2 col-sm-10">
259 <div class="checkbox">
260 <label>
261 <input type="checkbox"> Remember me
262 </label>
263 </div>
264 </div>
265 </div>
266 <div class="form-group">
267 <div class="col-sm-offset-2 col-sm-10">
268 <button type="submit" class="btn btn-default">Sign in</button>
269 </div>
270 </div>
271 </form>
272 </div>
273 <div class="modal-footer">
274 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
275 <button type="button" class="btn btn-primary">登录确认</button>
276 </div>
277 </div>
278 </div>
279 </div>
280 <!-- Bootstrap core JavaScript
281 ================================================== -->
282 <!-- Placed at the end of the document so the pages load faster -->
283 <script src="Dashboard_files/jquery.min.js"></script>
284 <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
285 <script src="Dashboard_files/bootstrap.min.js"></script>
286 <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
287 <script src="Dashboard_files/holder.min.js"></script>
288 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
289 <script src="Dashboard_files/ie10-viewport-bug-workaround.js"></script>
290
291 <script>
292 $(".head").on("click", function () {
293 // 兄弟标签 紧挨着的ul标签 隐藏 addClass("hide")
294 $(this).parent().siblings().children("ul").slideUp();
295 // 把自己 紧挨着的ul标签显示 removeClass("hide")
296 // $(this).next().removeClass("hide");
297 $(this).next().slideToggle();
298 });
299 // $(".head").click(function (e) {
300 // $(e.target.nextElementSibling).toggleClass('hide')
301 // });
302
303 //监听
304 $(document).ready(function () {
305 $(document).click(function (e) {
306 // console.log($(e.target).text());
307 if ($(e.target).text() == '删除') {
308 $(e.target).parent().parent().remove();
309 // console.log($(e.target).parent().parent())
310 }
311 else if ($(e.target).text() == '添加') {
312 $(".model").removeClass("hide");
313 $(".shade").removeClass("hide")
314
315 }
316 else if ($(e.target).text() == '提交') {
317 $("#myModal").modal("hide");
318 str_num = 0;
319
320 var new_tr = '<tr><td>' + str_num + '</td><td>' + $($(".item")[0]).val() + '</td><td>' + $($(".item")[1]).val() + '</td><td>' + $($(".item")[2]).val() + '</td><td><button class="del_but btn-danger">删除</button><button class="alter_but btn-primary">更改</button></td></tr>';
321
322 console.log(str_num);
323
324 // parseInt(str_num)+=1
325 $("tbody").append(new_tr);
326
327 }
328 else if ($(e.target).text() == '更改') {
329 $(e.target).parent().parent().children().eq(1).html('<input type="text" value=' + $(e.target).parent().parent().children().eq(1).html() + '>')
330 $(e.target).parent().parent().children().eq(2).html('<input type="text" value=' + $(e.target).parent().parent().children().eq(2).html() + '>')
331 $(e.target).parent().parent().children().eq(3).html('<input type="text" value=' + $(e.target).parent().parent().children().eq(3).html() + '>')
332 $(e.target).text('保存');
333 $(e.target).attr("class", "btn btn-info saveBtn");
334
335 }
336 else if ($(e.target).text() == '保存') {
337 $(e.target).parent().parent().children().eq(1).html($(e.target).parent().parent().children().eq(1).children().val());
338 $(e.target).parent().parent().children().eq(2).html($(e.target).parent().parent().children().eq(2).children().val());
339 $(e.target).parent().parent().children().eq(3).html($(e.target).parent().parent().children().eq(3).children().val());
340
341 $(e.target).text('更改');
342 $(e.target).attr("class", "btn btn-primary edit");
343 }
344 else if ($(e.target).text() == '登录确认') {
345 if ($('#inputEmail3').val() == '') {
346 $('#inputEmail3').next().text("请输入注册时用的邮箱或者手机号呀")
347 $('#inputEmail3').addClass("input_color");
348 $('#inputEmail3').next().addClass("text_color")
349 } else {
350 $('#inputEmail3').next().text("")
351 }
352 if ($('#inputPassword3').val() == '') {
353 $('#inputPassword3').next().text("喵，你没输入密码么？");
354 $('#inputPassword3').addClass("input_color");
355 $('#inputPassword3').next().addClass("text_color")
356 } else {
357 $('#inputPassword3').next().text("");
358 if($('#inputPassword3').val() !== ''&$('#inputEmail3').val() !== ''){
359 $("#myModal2").modal("hide");
360 }
361
362 }
363 }
364 else if ($(e.target).hasClass("input_color")) {
365 $('.form-control').next().text("");
366 $('.form-control').removeClass("input_color");
367 $('.form-control').next().removeClass("text_color")
368 }
369 })
370 });
371 </script>
372 </body>
373 </html>
浙公网安备 33010602011771号