Stellen Sie eine Frage : So verwenden Sie native JS, um grundlegende Funktionen des Hinzufügens, Löschens, Änderns und Suchens zu implementieren? ? ?
Das Problem lösen
Wenn Sie bereits ein bestimmtes Fundament in JS haben
Wenn Sie eine gewisse Grundlage für Bootstrap haben
Im Folgenden finden Sie spezifische Beispiele,
Enthält zwei Dateien (index.jsp und index.js)
<%@ page Language = "java" contentType = "text/html; charset = utf-8" pageCoding = "utf-8"%> <! docType html public "-// w3c // dtd html 4.01 transitional // en" http://www.w.w.w.w.w.w.w.w.w3. <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <!-stootstrap-> <link href = "ressourcen/bootstrap/css/bootstrap.min href = "Ressourcen/Bootstrap/CSS/Bootstrap-themen.min type = "button" id = "user_add" data-toggle = "modal" data-target = "#myModal" onclick = "OptionUserData (this);"> add <button> <button type = "button" id = "user_delete" onclick = "optionUserData (this); data-toggle = "modal" data-target = "#myModal" Onclick = "OptionUserData (this);"> bearbeiten </button> <button type = "button" id = "user_find" onclick = "OptionUlerData (this); id="s_userName" placeholder="Query by name"> <input type="text" id="s_all" placeholder="Full text search"> </caption> <thead> <tr> <th>Serial number</th> <th>Work number</th> <th>Name</th> <th>Gender</th> <th>Password</th> <th>Age</th> <th>Date of Birth</th> </tr> </thead> <tbody id="tbody"> </tbody> </table> <!-- Modal Box (Modal) --> <div id="myModal" role="dialog" > <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true"> × </button> <h4 id="myModalLabel"> New Benutzer </h4> </div> <div id = "modal-body"> <label für = "name"> Arbeitsnummer: </label> <Eingabe type = "text" id = "m_code" placeholder = "Bitte geben Sie die Arbeitsnummer ein. <Eingabe type = "text" id = "m_sex" placeholder = "Bitte ein Geschlecht eingeben"> <Label für = "Name"> Passwort: </label> <Eingabe type = "text" id = "m_password" placeholder = "Bitte geben Sie ein Passwort ein. Geburt: </label> <Eingabe type = "text" id = "m_birthday" placeholder = "Bitte geben Sie das Geburtsdatum ein"> </div> <div> <button type = "button" data-dismiss = "modal"> speichern </button> <button type <!-Verwandte Js müssen hier vorgestellt werden, es ist sehr wichtig, bitte denken Sie daran-> <script type = "text/javaScript" src = "ressourcen/jQuery/jQuery.js"> </script> <script type = "text/javascript" src = "ressourcen/bootstrap/js/bootstrap.min src = "index.js"> </script> </body> </html> Code kopieren code code // Speichern Sie alle Benutzer var user = Benutzer || {}; // Betriebstyp var operatetype = ""; // Suchobjekt var searchUsers = suchuser || {}; // Benutzerkonstruktor -Methode var user = {erstellen: Funktion (Code, Benutzername, Sex, Kennwort, Alter, Geburtstag) {this.code = code; this.username = userername; this.sex = sex; this.Password = Passwort; this.age = Alter; this.birthday = Geburtstag; }, // Benutzer hinzufügen addUserData: function () {if (this.Code! }}. }}}, // Benutzer bearbeiten editUserData: function () {für (var i in Benutzern) {if (this.code == user [i] .code) {user [i] .username = this.username; Benutzer [i] .Sex = this.sex; Benutzer [i] .Password = this.Password; Benutzer [i] .Birthday = this.birthday; Benutzer [i] .age = this.age; }}}, // Benutzer findUserData: function (data) {für (var i in Benutzern) {if (data.code.indexof (Benutzer [i] .Code)> = 0 || Data.username.indexof (Benutzer [i] .username)> = 0) {suchusers [i]. RefreshDatas (SearchUsers); }}}}}}}; Funktion new (aclass, acarams) {function New _ () {aclass.create.apply (this, acarams); } new_.prototype = aclass; return New_ (); } // Bootstrap Modal Box Ereignis $ ('#MyModal'). On ('hide.bs.modal', function () {// einige Aktionen ausführen ... var InputElements = this.getElementsByTagName ("Eingabe"); var userarr = []; für (var i = 0; i <inputEllements.Lenght. = NEW (Userarr); / *** Erster Laden der Seitenausführungsmethode*/ Funktion loadUserDatas () {var userArray = inituSerDatas (); addrowdata (userArray); RefreshDatas (Benutzer); } / *** Benutzerdaten initialisieren* / function inituserDatas () {var inituser1 = new (Benutzer, ["1001", "Xiaolan", "weiblich", "1234", "13", "1991-1-1"]); var Inituser2 = neu (Benutzer, ["1002", "Xiaoyi", "männlich", "1234", "13", "1991-1-1"]); var Inituser3 = neu (Benutzer, ["1003", "Orchid", "Female", "1234", "13", "1991-1-1"]); var Inituser4 = neu (Benutzer, ["1004", "Laner", "weiblich", "1234", "13", "1991-1-1"]); Benutzer [Inituser1.Code] = Inituser1; Benutzer [Inituser2.Code] = Inituser2; Benutzer [Inituser3.Code] = Inituser3; Benutzer [Inituser4.Code] = Inituser4; Rückkehrbenutzer; } / *** Fügen Sie der Tabelle eine Zeile von HTML -Daten hinzu* / Funktion addrowdata (datas) {var tbodyElement = document.getElementById ("tbody"); var html = ""; var color = "Warnung"; var flag = true; für (var i in datas) {if (flag) {color = "info"; } else {color = "Warnung"; } html = html + "<tr class = '" + color + "'> <td style = 'width: 30px;'> <Eingabe type = 'CheckBox'> </td> <td id = 'code'>" + datas [i] .code + "</td> <td id = 'username'>" + datas [i]. id = 'sex'> " +datas [i] .sex +" </td> <td id = 'password'> " +datas [i] .password +" </td> <td id = 'ay'> " +datas [i] .AGE +" </td> <td id = 'Geburtstag'> " +datas [i] .birthday +". Flag =! Flag; // Farbkonvertierung} tbodyElement.innerhtml = html; } / *** Benutzerdaten aktualisieren* / function reVeshDatas (datas) {addrowData (datas); }; / *** Erfassen Sie eine Zeile von Daten*/ Funktion CollectionRowData (Param) {var tdelement = param.getElementsByTagName ("td"); var userarr = []; für (var i = 1; i <tdelement.length; i ++) {var temp = tdelement [i] .TextContent; userarr [i-1] = temp; } var user = new (user, userarr); Benutzer zurückgeben; } /*** Benutzeroperation Methode* /Funktion optionUserData (Param) {// Betriebskategorie var optionType = param.getAttribute ("id"); if (optionType == "user_add") {operatortype = "add"; } else if (optionType == "user_delete") {var checkrowdata = isCheckedData (); var user = collectionRowdata (checkrowdata); user.deleteUserData (); RefreshDatas (Benutzer); } else if (optionType == "user_edit") {operatortype = "bearbeiten"; var checkrowdata = isShEckedData (); var user = collectionRowdata (checkrowdata); var modal_body = document.getElementById ("Modal-Body"); var InputElements = modal_body.getElementsByTagName ("input"); für (var i = 0; i <Eingabeelemente }} else if (optionType == "user_find") {var s_code = document.getElementById ("s_code"). Wert; var s_username = document.getElementById ("s_username"). Wert; var s_all = document.getElementById ("s_all"). Wert; // Suchen Sie nach Daten 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 {}} / *** Wenn Daten ausgewählt werden sollen, geben Sie die Zeile der ausgewählten Daten zurück* / function isCheckedData () {var tbodyElement = document.getElementById ("tbody"); var trelements = tbodyElement.getElementsByTagName ("tr"); var flag = false; für (var i = 0; i <trelements if (InputElement.Conted) {flag = true; Rückkehrtrelemente [i]; }} if (! flag) {alert ("Bitte einen Datensatz auswählen!"); $ ('#MYMODAL'). UNBIND ("On"); }}Reproduktionsbild:
Wenn Sie weiterhin ausführlich lernen möchten, können Sie hier klicken, um Ihnen zu lernen und Ihnen zwei aufregende Themen anzuhängen: Bootstrap -Lern -Tutorial Bootstrap Practical Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.