1、完成書籍的添加、編輯、刪除、查找功能。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>圖書管理系統</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 /*font-size: 12px;*/ 13 } 14 15 a { 16 text-decoration: none; 17 color: darkgray; 18 } 19 20 .head { 21 position: relative; 22 width: 100%; 23 height: 45px; 24 line-height: 45px; 25 background: rgba(0, 0, 0, 0.79); 26 z-index: 1000; 27 } 28 29 .title { 30 color: white; 31 float: left; 32 font-size: 20px; 33 font-weight: 600; 34 letter-spacing: 3px; 35 margin-left: 100px; 36 } 37 38 .head > a { 39 margin-left: 100px; 40 } 41 42 .login { 43 display: block; 44 float: right; 45 margin-right: 100px; 46 } 47 48 .login span { 49 color: white; 50 } 51 52 .login a { 53 margin: 0 16px; 54 } 55 56 .middle { 57 position: relative; 58 } 59 60 .left { 61 display: inline-block; 62 width: 15%; 63 height: 500px; 64 border-right: 1px black solid; 65 margin: 0 auto; 66 text-align: center; 67 } 68 69 .left #operate { 70 margin-top: 20px; 71 background: #396bb3; 72 color: white; 73 height: 35px; 74 line-height: 35px; 75 } 76 77 .left a { 78 display: block; 79 width: 200px; 80 text-align: left; 81 margin: 0px 0 0 23px; 82 color: #396bb3; 83 } 84 85 .right { 86 display: inline-block; 87 position: absolute; 88 width: 84.9%; 89 90 } 91 92 .find { 93 position: relative; 94 margin: 15px 6%; 95 text-align: right; 96 } 97 98 .find span { 99 display: inline-block; 100 background: gray; 101 padding-left: 25px; 102 background: #f4f4f4; 103 border: solid 1px #c9c9c9;; 104 border-radius: 5px; 105 } 106 107 .find input { 108 display: inline; 109 width: 150px; 110 height: 30px; 111 border: none; 112 border-left: 1px solid #c9c9c9; 113 border-bottom-right-radius: 5px; 114 border-top-right-radius: 5px; 115 } 116 117 button, .find button { 118 width: 50px; 119 height: 30px; 120 background-color: #396bb3; 121 color: white; 122 border: solid 1px; 123 border-radius: 4px; 124 } 125 126 .tb { 127 width: 90%; 128 margin: 0 auto; 129 130 border-collapse: collapse; 131 } 132 133 .col_1 { 134 width: 10%; 135 } 136 137 .col_6 { 138 width: 15%; 139 } 140 141 .col_7 { 142 width: 25% 143 } 144 145 .col_7 .view { 146 background-color: #339900; 147 } 148 149 .col_7 .edit { 150 background-color: orange; 151 } 152 153 .col_7 .del { 154 background-color: firebrick; 155 } 156 157 tr { 158 text-align: center; 159 border-top: 1px solid #c9c9c9; 160 } 161 162 td, th { 163 padding: 10px 0; 164 } 165 166 .page { 167 margin: 20px auto; 168 height: 34px; 169 } 170 171 .page ul { 172 height: 34px; 173 width: 50%; 174 position: relative; 175 left: 37%; 176 } 177 178 .page li { 179 float: left; 180 display: inline; 181 height: 34px; 182 line-height: 32px; 183 text-align: center; 184 font-size: 12px; 185 } 186 187 .page1 { 188 width: 34px; 189 line-height: 36px; 190 color: white; 191 background-color: #396bb3; 192 } 193 194 .page a { 195 196 float: left; 197 color: #396bb3; 198 width: 34px; 199 border: 1px solid #e1e1e1; 200 } 201 202 .page a:hover { 203 color: #fff; 204 background-color: #396bb3; 205 border: 1px solid #396bb3; 206 } 207 208 .page .page_edge { 209 width: 50px; 210 } 211 212 .bottom { 213 margin-top: 20px; 214 text-align: center; 215 font-size: 14px; 216 } 217 218 .pb { 219 font-weight: 600; 220 } 221 222 .pb span { 223 color: #396bb3; 224 } 225 226 .hide { 227 display: none; 228 } 229 230 .bg { 231 position: fixed; 232 width: 100%; 233 height: 100%; 234 background-color: gray; 235 opacity: 0.3; 236 z-index: 1; 237 238 } 239 240 .add_text { 241 background: white; 242 position: fixed; 243 left: 50%; 244 top: 50%; 245 margin-top: -150px; 246 margin-left: -150px; 247 width: 350px; 248 height: 300px; 249 padding-top: 15px; 250 z-index: 1; 251 252 } 253 254 .add_text input { 255 width: 180px; 256 height: 25px; 257 font-size: 14px; 258 margin: 10px; 259 border: 1px solid gray; 260 border-radius: 2px; 261 } 262 263 .add_text p { 264 text-align: center; 265 margin: 10px 0; 266 line-height: 44px; 267 } 268 269 .add_text button { 270 width: 60px; 271 height: 30px; 272 margin: 5px; 273 } 274 275 select { 276 width: 25%; 277 } 278 279 </style> 280 </head> 281 <body> 282 <div class="bg hide handel"></div> 283 <div class="add_text hide handel"> 284 <p>書名:<input name="book" placeholder=""></p> 285 <p>作者:<input name="author" placeholder=""></p> 286 <p>價格:<input name="price" placeholder=""></p> 287 <p>分類: 288 <select name="classify"> 289 <option id="計算機" value="計算機">計算機</option> 290 <option id="文學" value="文學">文學</option> 291 </select></p> 292 <p id="butt"> 293 <button class="confirm">確定</button> 294 <button class="cancel">取消</button> 295 </p> 296 </div> 297 <div class="all"> 298 <div class="head"> 299 <span class="title">圖書管理系統</span> 300 <a href="#1">首頁</a> 301 <span class="login"> 302 <a href="#2">歡迎你</a><span>Shaw</span> 303 <a href="#3">注銷</a> 304 <a href="#4">修改密碼</a> 305 </span> 306 </div> 307 <div class="middle"> 308 <div class="left"> 309 <div id="operate">操作 310 <div class="hide"> 311 <a id="add_book" href="#"> 312 <div> >>>添加書籍</div> 313 </a> 314 <a href="#"> 315 <div> >>>草稿箱</div> 316 </a> 317 <a href="#"> 318 <div> >>>設置默認編輯器</div> 319 </a> 320 <a href="#"> 321 <div> >>>備份書籍</div> 322 </a> 323 </div> 324 </div> 325 </div> 326 <div class="right"> 327 <div class="find"> 328 <span><input id="find_text" type="text" placeholder=" Title" value=""></span> 329 <button id="find_btn" onclick="fd()">查找</button> 330 </div> 331 <div class="content"> 332 <table class="tb"> 333 <tr class="row_t"> 334 <th class="col_1">圖書編號</th> 335 <th class="col_2">書名</th> 336 <th class="col_3">作者</th> 337 <th class="col_4">價格</th> 338 <th class="col_5">分類</th> 339 <th class="col_6">上架時間</th> 340 <th class="col_7">操作</th> 341 </tr> 342 <tr class="row hide"> 343 <td class="col_1">15662</td> 344 <td class="col_2">金瓶</td> 345 <td class="col_3">egon</td> 346 <td class="col_4">12.00</td> 347 <td class="col_5">計算機</td> 348 <td class="col_6">2017-08-03</td> 349 <td class="col_7"> 350 <button class="view">查看</button> 351 <button class="edit" onclick="redact(this)">編輯</button> 352 <button class="del" onclick="dell(this)">刪除</button> 353 </td> 354 </tr> 355 <tr id="row_0"> 356 <td class="col_1">15663</td> 357 <td class="col_2">金瓶</td> 358 <td class="col_3">egon</td> 359 <td class="col_4">12.00</td> 360 <td class="col_5">計算機</td> 361 <td class="col_6">2017-08-03</td> 362 <td class="col_7"> 363 <button class="view">查看</button> 364 <button class="edit" onclick="redact(this)">編輯</button> 365 <button class="del" onclick="dell(this)">刪除</button> 366 </td> 367 </tr> 368 <tr id="row_1"> 369 <td class="col_1">15664</td> 370 <td class="col_2">水滸傳</td> 371 <td class="col_3">alex</td> 372 <td class="col_4">45.00</td> 373 <td class="col_5">文學</td> 374 <td class="col_6">2017-08-03</td> 375 <td class="col_7"> 376 <button class="view">查看</button> 377 <button class="edit" onclick="redact(this)">編輯</button> 378 <button class="del" onclick="dell(this)">刪除</button> 379 </td> 380 </tr> 381 <tr id="row_2"> 382 <td class="col_1">15665</td> 383 <td class="col_2">水滸傳1</td> 384 <td class="col_3">alex</td> 385 <td class="col_4">45.00</td> 386 <td class="col_5">文學</td> 387 <td class="col_6">2017-08-03</td> 388 <td class="col_7"> 389 <button class="view">查看</button> 390 <button class="edit" onclick="redact(this)">編輯</button> 391 <button class="del" onclick="dell(this)">刪除</button> 392 </td> 393 </tr> 394 <tr id="row_3"> 395 <td class="col_1">15666</td> 396 <td class="col_2">水滸傳2</td> 397 <td class="col_3">alex</td> 398 <td class="col_4">45.00</td> 399 <td class="col_5">文學</td> 400 <td class="col_6">2017-08-03</td> 401 <td class="col_7"> 402 <button class="view">查看</button> 403 <button class="edit" onclick="redact(this)">編輯</button> 404 <button class="del" onclick="dell(this)">刪除</button> 405 </td> 406 </tr> 407 <tr id="row_4"> 408 <td class="col_1">15667</td> 409 <td class="col_2">水滸傳3</td> 410 <td class="col_3">alex</td> 411 <td class="col_4">45.00</td> 412 <td class="col_5">文學</td> 413 <td class="col_6">2017-08-03</td> 414 <td class="col_7"> 415 <button class="view">查看</button> 416 <button class="edit" onclick="redact(this)">編輯</button> 417 <button class="del" onclick="dell(this)">刪除</button> 418 </td> 419 </tr> 420 <tr id="row_5"> 421 <td class="col_1">15668</td> 422 <td class="col_2">水滸傳4</td> 423 <td class="col_3">alex</td> 424 <td class="col_4">45.00</td> 425 <td class="col_5">文學</td> 426 <td class="col_6">2017-08-03</td> 427 <td class="col_7"> 428 <button class="view">查看</button> 429 <button class="edit" onclick="redact(this)">編輯</button> 430 <button class="del" onclick="dell(this)">刪除</button> 431 </td> 432 </tr> 433 <tr class="hide" id="row_6"> 434 <td class="col_1">15668</td> 435 <td class="col_2">水滸傳5</td> 436 <td class="col_3">alex</td> 437 <td class="col_4">45.00</td> 438 <td class="col_5">文學</td> 439 <td class="col_6">2017-08-03</td> 440 <td class="col_7"> 441 <button class="view">查看</button> 442 <button class="edit" onclick="redact(this)">編輯</button> 443 <button class="del" onclick="dell(this)">刪除</button> 444 </td> 445 </tr> 446 </table> 447 </div> 448 <div class="page"> 449 <ul> 450 <li><a href="#" class="page_edge">上一頁</a></li> 451 <li class="page1"><span>1</span></li> 452 <li><a href="#" class="pagepa hide">2</a></li> 453 <li><a href="#" class="page_edge">下一頁</a></li> 454 </ul> 455 </div> 456 </div> 457 </div> 458 <div class="bottom"> 459 <p>©All rights reserved</p> 460 <p class="pb">Powered by <span>Shaw</span></p> 461 </div> 462 </div> 463 464 <script> 465 var add_book = document.getElementById("add_book"); 466 var handel = document.getElementsByClassName("handel"); 467 var confirm = document.getElementsByClassName("confirm")[0]; 468 var cancel = document.getElementsByClassName("cancel")[0]; 469 var user = document.getElementsByName("book")[0]; 470 var author = document.getElementsByName("author")[0]; 471 var price = document.getElementsByName("price")[0]; 472 var input = document.getElementsByTagName("input"); 473 var select = document.getElementsByName("classify")[0]; 474 var find_text = document.getElementById("find_text"); 475 var find_btn=document.getElementById("find_btn") 476 var operate = document.getElementById("operate"); 477 var row_all = document.getElementsByTagName("tr"); 478 var page_edge = document.getElementsByClassName("page_edge"); 479 480 var tag = 0; 481 var row_list = {}; 482 483 var current_page = 1; 484 485 for (var i = 2; i < row_all.length; i++) { 486 row_list[row_all[i].id] = row_all[i] 487 } 488 489 // for () 490 491 function list_lengh(list) { 492 var i = 0; 493 for (var j in list) { 494 i++; 495 } 496 return i; 497 } 498 499 console.log(row_list); 500 501 function dell(self) { 502 self.parentNode.parentNode.parentNode.removeChild(self.parentNode.parentNode) 503 } 504 505 function changeNum(num) { 506 if (num < 10) { 507 return "0" + num; 508 } else { 509 return num; 510 } 511 } 512 513 function getToday() { 514 var data = new Date(); 515 var year = data.getFullYear(); 516 var mon = data.getMonth() + 1; 517 var day = data.getDate(); 518 return year + "-" + changeNum(mon) + "-" + day; 519 520 } 521 522 function redact(self) { 523 console.log(select) 524 edit_row = self.parentElement.parentElement; 525 526 for (var i = 0; i < handel.length; i++) { 527 handel[i].classList.remove("hide"); 528 } 529 530 for (i = 0; i < input.length - 1; i++) { 531 input[i].value = edit_row.children[i + 1].innerText; 532 } 533 534 for (i = 0; i < select.options.length; i++) { 535 select.options[i].removeAttribute("selected"); 536 } 537 538 var de_select = document.getElementById(edit_row.children[4].innerText) 539 de_select.setAttribute("selected", "") 540 tag = 1; 541 } 542 543 function fd() { 544 for (var i in row_list) { 545 if (row_list[i].innerText.match(find_text.value.trim())) { 546 row_list[i].classList.remove("hide") 547 } 548 else { 549 row_list[i].classList.add("hide") 550 } 551 } 552 } 553 554 add_book.onclick = function () { 555 for (i = 0; i < handel.length; i++) { 556 handel[i].classList.remove("hide") 557 } 558 }; 559 560 confirm.onclick = function () { 561 var message = []; 562 var row = document.getElementsByTagName("tr")[document.getElementsByTagName("tr").length - 1]; 563 var new_row = row.cloneNode(true); 564 var today = getToday(); 565 var flag = 1; 566 567 for (var i = 0; i < handel.length; i++) { 568 handel[i].classList.add("hide"); 569 } 570 571 if (!tag) { 572 // new_row.classList.remove("hide"); 573 574 message[0] = Number(new_row.children[0].innerText) + 1; 575 for (i = 0; i < input.length - 1; i++) { 576 message.push(input[i].value); 577 input[i].value = ""; 578 } 579 message[message.length - 1] = Number(message[message.length - 1]).toFixed(2) 580 message.push(select.options[select.options.selectedIndex].innerText); 581 message.push(today); 582 console.log(message); 583 584 for (var j = 0; j < message.length; j++) { 585 new_row.children[j].innerText = message[j] 586 } 587 for (var me in message) { 588 if (message[me].length == 0) { 589 flag = 0; 590 break; 591 } 592 } 593 594 if (flag) { 595 new_row.id = "row_" + list_lengh(row_list); 596 row_list[new_row.id] = new_row; 597 if (list_lengh(row_list) <= (current_page - 1) * 6 -1 || list_lengh(row_list) > (current_page) * 6-1) { 598 new_row.classList.add("hide") 599 } 600 else { 601 new_row.classList.remove("hide") 602 } 603 row.parentElement.appendChild(new_row); 604 } 605 else { 606 alert("請填寫完整的信息") 607 } 608 } 609 else { 610 message = []; 611 for (i = 0; i < input.length - 1; i++) { 612 message.push(input[i].value); 613 input[i].value = ""; 614 } 615 message[message.length - 1] = Number(message[message.length - 1]).toFixed(2) 616 message.push(select.options[select.options.selectedIndex].innerText); 617 618 for (var m in message) { 619 if (message[m].length == 0) { 620 flag = 0; 621 break; 622 } 623 } 624 tag = 0; 625 626 if (flag) { 627 for (j = 0; j < message.length; j++) { 628 edit_row.children[j + 1].innerText = message[j] 629 } 630 } 631 else { 632 alert("請填寫完整的信息") 633 } 634 } 635 }; 636 637 cancel.onclick = function () { 638 for (var i = 0; i < input.length - 1; i++) { 639 input[i].value = ""; 640 } 641 for (i = 0; i < handel.length; i++) { 642 handel[i].classList.add("hide"); 643 } 644 }; 645 646 find_btn.onclick=function () { 647 fd(); 648 } 649 650 find_text.onkeydown = function (e) { 651 e = e || window.event; 652 var keynum = e.keyCode; 653 if (keynum == 13) { 654 fd(); 655 } 656 } 657 658 page_edge[1].onclick = function () { 659 if (list_lengh(row_list) / 6 > current_page) { 660 current_page++; 661 } 662 663 for (var i in row_list) { 664 if (Number(i.slice(4,)) <= (current_page - 1) * 6-1 || Number(i.slice(4,)) > (current_page) * 6-1) { 665 row_list[i].classList.add("hide") 666 } 667 else { 668 row_list[i].classList.remove("hide") 669 } 670 } 671 } 672 673 page_edge[0].onclick = function () { 674 if (current_page > 1) { 675 current_page--; 676 } 677 678 for (var i in row_list) { 679 if (Number(i.slice(4,)) <= (current_page - 1) * 6 -1|| Number(i.slice(4,)) > (current_page) * 6-1) { 680 row_list[i].classList.add("hide") 681 } 682 else { 683 row_list[i].classList.remove("hide") 684 } 685 } 686 } 687 688 var error = document.createElement("p"); 689 error.innerText = "2-10個字符，可使用字母、漢字、數字、不能是純數字"; 690 error.style.color = "red"; 691 error.style.fontSize = "12px"; 692 error.style.lineHeight = "12px"; 693 error.style.float = "none"; 694 error.style.margin = "0"; 695 error.style.textAlign = "center"; 696 var error1 = error.cloneNode(true); 697 error1.innerText = "請輸入正確的作者名"; 698 var error2 = error.cloneNode(true); 699 error2.innerText = "請輸入正確的價格"; 700 701 user.onblur = function () { 702 703 if (!isNaN(user.value) || user.value.length > 10 || user.value.length < 2) { 704 705 if (!this.nextElementSibling) { 706 this.parentNode.appendChild(error) 707 } 708 } 709 else { 710 if (this.nextElementSibling) { 711 this.parentNode.removeChild(this.nextElementSibling) 712 } 713 } 714 715 }; 716 717 author.onblur = function () { 718 719 if (!isNaN(author.value) || author.value.length > 10 || author.value.length < 2) { 720 if (!this.nextElementSibling) { 721 this.parentNode.appendChild(error1) 722 } 723 } 724 else { 725 if (this.nextElementSibling) { 726 this.parentNode.removeChild(this.nextElementSibling) 727 } 728 } 729 }; 730 731 price.onblur = function () { 732 if (isNaN(price.value) || price.value.length == 0) { 733 734 if (!this.nextElementSibling) { 735 this.parentNode.appendChild(error2) 736 } 737 } 738 else { 739 if (this.nextElementSibling) { 740 this.parentNode.removeChild(this.nextElementSibling) 741 } 742 } 743 }; 744 745 operate.onmouseover = function () { 746 this.firstElementChild.classList.remove("hide") 747 } 748 749 operate.onmouseout = function () { 750 this.firstElementChild.classList.add("hide") 751 } 752 753 </script> 754 </body> 755 </html>
z-index屬性：http://www.w3school.com.cn/cssref/pr_pos_z-index.asp
border-collapse 屬性：http://www.w3school.com.cn/cssref/pr_tab_border-collapse.asp