اطرح سؤالاً : كيفية استخدام JS الأصلي لتنفيذ الوظائف الأساسية لإضافة وحذف وتعديل والبحث؟ ؟ ؟
حل المشكلة
إذا كان لديك بالفعل أساس معين في JS
إذا كان لديك أساس معين ل Bootstrap
فيما يلي أمثلة محددة ،
يحتوي على ملفين (index.jsp و index.js)
<٪@ page language = "java" contentType = "text/html ؛ charset = utf-8" pageencoding = "utf-8" ٪> <! <html> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8" HREF = "Resource/Bootstrap/CSS/Bootstrap-theme.min.css" rel = "STYLESHEET" type = "button" id = "user_add" data-toggle = "modal" data-target = "#mymodal" onClick = "OptionUserData (this) ؛ data-toggle = "modal" t-arget = "#mymodal" onClick = "OptionUserData (this) ؛"> edit </utton> <button type = "button" id = "user_find" onClick = "OptionUserData (this) ؛ id = "s_username" placeholder = "query by name"> <type type = "text" id = "s_all" placeholder = "full text search"> </saption> <thead> <tr> <th> number </h> <th> <th> <th> </th> </th> </tr> </thead> <tbody id = "tbody"> </tbody> </table> <!-مربع مشروط (modal)-> <div id = "mymodal" rob = "dialog"> <viv> <viv> <div> <button type = "button" data-dismiss = "modal" aria-hidden = "true" المستخدم </h4> </viv> <div id = "modal-body"> <label for = "name"> رقم العمل: </label> <input type = "text" id = "m_code" placeholder = "الرجاء إدخال رقم العمل"> <label> <same "> name> </label> <input type =" text "id =" m_username " <type type = "text" id = "m_sex" placeholder = "الرجاء إدخال جنس"> <label for = "name"> كلمة المرور: </label> <input type = "text" id = "m_password" placeholder = "layed ender a enloy> <label> <label for =" name " الولادة: </label> <input type = "text" id = "m_birthday" placeholder = "الرجاء إدخال تاريخ الميلاد"> </div> <viv> <button type = "button" dismiss = "modal"> حفظ </button> <button type = "button"> إرسال التغييرات <//div> <! <!-يجب تقديم JS ذات الصلة هنا ، إنه أمر مهم للغاية ، يرجى تذكر-> <script type = "text/javaScript" src = "resource/jQuery/jQuery.js"> </script> <script type = "text/javaScript" src = "resource/bootstrap/js/boottrap.min.js" src = "index.js"> </script> </body> </html> نسخ رمز كود // تخزين جميع المستخدمين var = المستخدمين || {} ؛ // نوع التشغيل var operateType = "" ؛ // كائن بحث التخزين var searchUsers = SearchUsers || {} ؛ // طريقة منشئ المستخدم var user = {create: function (رمز ، اسم المستخدم ، الجنس ، كلمة المرور ، العمر ، عيد الميلاد) {this.code = code ؛ this.username = اسم المستخدم ؛ this.Sex = الجنس ؛ this.password = كلمة المرور ؛ this.age = العمر ؛ this.birthday = عيد ميلاد ؛ } ، // إضافة addUserData user user: function () {if (this.code! = "") {users [this.code] = this ؛ }} ، // delete user deleteuserData: function () {for (var i at user) {if (this.code == useral [i] .code) {delete usered [i] ؛ }}} ، // edit user edituserdata: function () {for (var i at user) {if (this.code == users [i] .Code) {user [i] .username = this.username ؛ المستخدمين [i] .sex = this.sex ؛ المستخدمون [i] .password = this.password ؛ المستخدمون [i] .birthday = this.birthday ؛ المستخدمون [i] .age = this.age ؛ }}} ، // ابحث عن المستخدم FindUserData: function (data) {for (var i at user) {if (data.code.indexof (users [i] .code)> = 0 || data.username.indexof (user [i] .username)> = 0) RefreshDatas (SearchUsers) ؛ }}}}}}} ؛ وظيفة جديدة (aclass ، aparams) {function new _ () {aclass.create.apply (this ، aparams) ؛ } new_.prototype = aclass ؛ إرجاع new_ () ؛ }. = user (userarr) ؛ / *** التحميل الأول لطريقة تنفيذ الصفحة*/ وظيفة loadUserDatas () {var userarray = inituserDatas () ؛ addrowdata (userarray) ؛ RefreshDatas (المستخدمين) ؛ } / *** تهيئة بيانات المستخدم* / وظيفة initUserDatas () {var inituser1 = new (user ، ["1001" ، "Xiaolan" ، "Female" ، "1234" ، "13" ، "1991-1-1"]) ؛ var inituser2 = new (user ، ["1002" ، "Xiaoyi" ، "Male" ، "1234" ، "13" ، "1991-1-1"]) ؛ var inituser3 = new (user ، ["1003" ، "Orchid" ، "Female" ، "1234" ، "13" ، "1991-1-1"]) ؛ var inituser4 = new (user ، ["1004" ، "laner" ، "female" ، "1234" ، "13" ، "1991-1-1"]) ؛ المستخدمون [initUser1.code] = inituser1 ؛ المستخدمون [initUser2.Code] = initUser2 ؛ المستخدمين [initUser3.Code] = initUser3 ؛ المستخدمون [initUser4.Code] = initUser4 ؛ إرجاع المستخدمين ؛ } / *** إضافة صف من بيانات html إلى الجدول* / وظيفة addRowData (datas) {var tbodyElement = document.getElementById ("tbody") ؛ var html = "" ؛ var color = "تحذير" ؛ var flag = true ؛ لـ (var i in datas) {if (flag) {color = "info" ؛ } آخر {color = "تحذير" ؛ } html = html + "<tr class = '" + color + "'> <td style = 'width: 30px ؛'> <input type = 'checkbox'> </td> <td id = 'code'>" + datas [i] .code + "</td> <td id = 'username> id = 'sex'> " +datas [i] .Sex +" </td> <td id = 'password'> " +datas [i] .password +" </td> <td id = 'age'> " +datas [i]. flag =! flag ؛ // تحويل اللون} tbodyElement.innerhtml = html ؛ } / *** تحديث بيانات المستخدم* / وظيفة shuplatdatas (البيانات) {addRowData (بيانات) ؛ } ؛ / *** جمع صف من البيانات*/ collectionRowData (param) {var tdelement = param.getElementSbyTagName ("td") ؛ var userarr = [] ؛ لـ (var i = 1 ؛ i <tdelement.length ؛ i ++) {var temp = tdelement [i] .textContent ؛ userarr [i-1] = temp ؛ } var user = new (user ، userarr) ؛ إرجاع المستخدم ؛ } /*** طريقة تشغيل المستخدم* /وظيفة OptionUserData (param) {// الحصول على فئة التشغيل var ortiveType = param.getAttribute ("id") ؛ if (OptionType == "user_add") {operArType = "add" ؛ } if (ortionType == "user_delete") {var checkRowData = iScheckedData () ؛ var user = collectionRowData (checkRowData) ؛ user.deleteuserData () ؛ RefreshDatas (المستخدمين) ؛ } if if (OptionType == "user_edit") {operAtorType = "edit" ؛ var checkRowData = isCheckedData () ؛ var user = collectionRowData (checkRowData) ؛ var modal_body = document.getElementById ("modal-body") ؛ var inputElements = modal_body.getElementsByTagName ("input") ؛ لـ (var i = 0 ؛ i <inputelements.length ؛ i ++) {var temp = inputElements [i] .id.SubString (2 ، inputelements [i] .id.length) inputelements [i] .value = user [temp] ؛ }} if if (OptionType == "user_find") {var s_code = document.getElementById ("s_code"). value ؛ var s_username = document.getElementById ("s_username"). القيمة ؛ var s_all = document.getElementById ("s_all"). value ؛ // ابحث عن البيانات var s_data = s_data || {} ؛ s_data.code = s_code ؛ s_data.username = s_username ؛ s_data.all = s_all ؛ var user = new (user ، []) ؛ user.finduserData (s_data) ؛ } else {}} / *** ما إذا كان يجب تحديد البيانات ، وإرجاع صف البيانات المحددة* / function 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 (inpectElement.checked) {flag = true ؛ إرجاع trelements [i] ؛ }} if (! flag) {Alert ("الرجاء تحديد سجل!") ؛ $ ('#mymodal'). unfind ("on") ؛ }}صورة التكاثر:
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.