ถามคำถาม : วิธีใช้ JS ดั้งเดิมเพื่อใช้ฟังก์ชั่นพื้นฐานของการเพิ่มการลบการแก้ไขและการค้นหา - -
แก้ปัญหา
หากคุณมีรากฐานบางอย่างใน JS
หากคุณมีรากฐานสำหรับ bootstrap
ด้านล่างเป็นตัวอย่างเฉพาะ
มีสองไฟล์ (index.jsp และ index.js)
<%@ page language = "java" contentType = "ข้อความ/html; charset = utf-8" pageencoding = "utf-8"%> <! doctype html สาธารณะ "-// w3c // dtd html 4.01 transitional // en" <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <!-bootstrap-> <link href = "resource/bootstrap/css/bootstrap.min.css href = "ทรัพยากร/bootstrap/css/bootstrap-theme.min.css" rel = "stylesheet" media = "หน้าจอ"> <title> js เฟรมเวิร์กการเรียนรู้ </title> </head> <body onload = "catuterdatas () type = "button" id = "user_add" data-toggle = "modal" data-target = "#mymodal" onclick = "OptionUserData (นี่);"> เพิ่ม </button> <button type = "ปุ่ม" id = "user_delete data-toggle = "modal" data-target = "#mymodal" onclick = "OptionUserData (นี่);"> แก้ไข </button> <button type = "ปุ่ม" id = "user_find" onclick = "ตัวเลือก" ตัวเลือก " id = "s_username" placeholder = "query ตามชื่อ"> <อินพุต type = "text" id = "s_all" placeholder = "การค้นหาข้อความแบบเต็ม"> </คำสั่ง> <thead> <tr> <th> หมายเลขซีเรียล </th> th <th> th <th> th <th> th <th> th <th> </tr> </thead> <tbody id = "tbody"> </tbody> </table> <!-กล่องโมดอล (modal)-> <div id = "mymodal" role = "กล่องโต้ตอบ"> <div> <div> <div> <button type = "button" data-dismiss = "modal </div> <div id = "modal-body"> <label for = "name"> หมายเลขงาน: </label> <อินพุต type = "text" id = "m_code" placeholder = "โปรดป้อนหมายเลขงาน"> <label for = "name"> ชื่อ: </label> type = "text" id = "m_sex" placeholder = "โปรดป้อนเพศ"> <label for = "name"> รหัสผ่าน: </label> <อินพุต type = "text" id = "m_password" placeholder = "โปรดป้อนรหัสผ่าน"> <label for = "name"> อายุ: </label> < การเกิด: </label> <อินพุต type = "text" id = "m_birthday" placeholder = "โปรดป้อนวันเดือนปีเกิด"> </div> <div> <div> <button type = "ปุ่ม" data-dismiss = "modal"> บันทึก </button> <button type = "button" <!-ต้องมีการแนะนำ JS ที่เกี่ยวข้องที่นี่เป็นสิ่งสำคัญมากโปรดจำไว้ว่า-> <script type = "text/javascript" src = "Resource/jQuery/jQuery.js"> </script> <script type = "text/javascript" src = "typestrap/bootstrap/bootstrap.min.min.js"> src = "index.js"> </script> </body> </html> คัดลอกรหัสคัดลอกรหัส // ที่เก็บข้อมูลผู้ใช้ VAR ทั้งหมดผู้ใช้ = ผู้ใช้ || - // ประเภทการดำเนินการ var operatetype = ""; // storage search object var searchusers = searchusers || - // เมธอดผู้ใช้ตัวสร้าง var user = {create: function (รหัส, ชื่อผู้ใช้, เพศ, รหัสผ่าน, อายุ, วันเกิด) {this.code = code; this.username = ชื่อผู้ใช้; this.sex = เพศ; this.password = รหัสผ่าน; this.age = อายุ; this.birthday = วันเกิด; }, // เพิ่ม addUserData ผู้ใช้: function () {ถ้า (this.code! = "") {ผู้ใช้ [this.code] = this; }}, // ลบผู้ใช้ deleteUserData: function () {สำหรับ (var i ในผู้ใช้) {ถ้า (this.code == ผู้ใช้ [i] .code) {ลบผู้ใช้ [i]; }}}, // แก้ไข edituserData ผู้ใช้: function () {สำหรับ (var i ในผู้ใช้) {ถ้า (this.code == ผู้ใช้ [i] .code) {ผู้ใช้ [i] .username = this.userName; ผู้ใช้ [i] .sex = this.sex; ผู้ใช้ [i] .password = this.password; ผู้ใช้ [i]. -birthday = this.birthday; ผู้ใช้ [i] .age = this.age; }}}, // ค้นหาผู้ใช้ findUserData: ฟังก์ชั่น (ข้อมูล) {สำหรับ (var i ในผู้ใช้) {ถ้า (data.code.indexof (ผู้ใช้ [i] .code)> = 0 || data.userName.indexof (ผู้ใช้ [i] .username)> = 0) RefreshDatas (SearchUsers); - ฟังก์ชั่นใหม่ (aclass, aparams) {ฟังก์ชั่นใหม่ _ () {aclass.create.apply (นี่, aparams); } new_.prototype = aclass; ส่งคืน new_ (); } // bootstrap modal box event $ ('#mymodal'). on ('hide.bs.modal', function () {// ดำเนินการบางอย่าง ... var inputelements = this.getElementByTagname ("อินพุต"); var userarr = []; สำหรับ (var i = 0; ใหม่ (ผู้ใช้, userarr); / *** การโหลดครั้งแรกของวิธีการดำเนินการหน้า*/ ฟังก์ชั่น loadUserDatas () {var userArray = initUserDatas (); addrowdata (userarray); RefreshDatas (ผู้ใช้); } / *** เริ่มต้นข้อมูลผู้ใช้* / ฟังก์ชัน inituserDatas () {var inituser1 = ใหม่ (ผู้ใช้, ["1001", "Xiaolan", "หญิง", "1234", "13", "1991-1-1"]); var inituser2 = ใหม่ (ผู้ใช้, ["1002", "Xiaoyi", "ชาย", "1234", "13", "1991-1-1-1"]); var inituser3 = ใหม่ (ผู้ใช้, ["1003", "กล้วยไม้", "หญิง", "1234", "13", "1991-1-1-1"]); var inituser4 = ใหม่ (ผู้ใช้, ["1004", "laner", "หญิง", "1234", "13", "1991-1-1"]); ผู้ใช้ [inituser1.code] = inituser1; ผู้ใช้ [inituser2.code] = inituser2; ผู้ใช้ [initUser3.Code] = initUser3; ผู้ใช้ [inituser4.code] = inituser4; ผู้ใช้ที่ส่งคืน; } / *** เพิ่มแถวของข้อมูล HTML ไปยังตาราง* / ฟังก์ชั่น addrowData (data) {var tbodyElement = document.getElementById ("tbody"); var html = ""; var color = "คำเตือน"; var flag = true; สำหรับ (var i ใน data) {ถ้า (ตั้งค่าสถานะ) {color = "info"; } else {color = "คำเตือน"; } html = html + "<tr class = '" + color + "'> <td style = 'width: 30px;'> <อินพุต type = 'ช่องทำเครื่องหมาย'> </td> <td id = 'รหัส'>" + datas [i] .code + "</td> <td id = 'username' id = 'sex'> " +data [i] .sex +" </td> <td id = 'รหัสผ่าน'> " +datas [i] .password +" </td> <td id = 'อายุ'> " +datas [i] .age +" </td> <td id = 'วันเกิด'> Flag =! Flag; // Color Conversion} tbodyElement.innerhtml = html; } / *** รีเฟรชข้อมูลผู้ใช้* / ฟังก์ชัน RefreshDatas (DATAS) {AddRowData (DATAS); - / *** รวบรวมแถวข้อมูล*/ ฟังก์ชันคอลเลกชัน RowData (param) {var tdelement = param.getElementsByTagname ("td"); var userarr = []; สำหรับ (var i = 1; i <tdelement.length; i ++) {var temp = tdelement [i] .TextContent; userarr [i-1] = อุณหภูมิ; } var user = ใหม่ (ผู้ใช้, userarr); ผู้ใช้ส่งคืน; } /*** วิธีการใช้งานผู้ใช้* /ฟังก์ชั่น OptionUserData (param) {// รับการดำเนินการหมวดหมู่ var pottuctYpe = param.getAttribute ("id"); if (aptoviType == "user_add") {operatortype = "เพิ่ม"; } else ถ้า (ectionType == "user_delete") {var checkRowData = isCheckedData (); var user = collectionRowData (checkRowData); user.deleteUserData (); RefreshDatas (ผู้ใช้); } else if (ectionType == "user_edit") {operatortype = "แก้ไข"; var checkRowData = isCheckedData (); var user = collectionRowData (checkRowData); var modal_body = document.getElementById ("modal-body"); var inputelements = modal_body.getElementsByTagname ("อินพุต"); สำหรับ (var i = 0; i <inputelements.length; i ++) {var temp = inputelements [i] .id.substring (2, inputelements [i] .id.length) inputelements [i] .value = ผู้ใช้ [temp]; }} else ถ้า (aptoviType == "user_find") {var s_code = document.getElementById ("s_code") ค่า; var s_username = document.getElementById ("s_username") ค่า; var s_all = document.getElementById ("s_all") ค่า; // ค้นหาข้อมูล var s_data = s_data || - s_data.code = s_code; s_data.username = s_username; s_data.all = s_all; var user = new (ผู้ใช้, []); user.finduserData (s_data); } else {}} / *** ไม่ว่าจะเลือกข้อมูลหรือไม่, ส่งคืนแถวของข้อมูลที่เลือก* / ฟังก์ชั่น ischeckedData () {var tbodyElement = document.getElementById ("tbody"); var trelements = tbodyElement.getElementsByTagname ("tr"); var flag = false; สำหรับ (var i = 0; i <trelements.length; i ++) {var inputelement = trelements [i] .getElementsByTagname ("input") [0]; if (inputelement.checked) {flag = true; กลับ trelements [i]; }} if (! Flag) {Alert ("โปรดเลือกบันทึก!"); $ ('#mymodal'). unbind ("on"); -ภาพการทำซ้ำ:
หากคุณยังต้องการเรียนรู้อย่างลึก
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น