Posez une question : comment utiliser le JS natif pour implémenter des fonctions de base de l'ajout, de la suppression, de la modification et de la recherche? ? ?
Résoudre le problème
Si vous avez déjà une certaine fondation dans JS
Si vous avez une certaine base pour bootstrap
Vous trouverez ci-dessous des exemples spécifiques,
Contient deux fichiers (index.jsp et index.js)
<% @ Page Language = "Java" ContentType = "Text / Html; charSet = UTF-8" Pageencoding = "UTF-8"%> <! Doctype HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // En" "http://www.w3.org/tr/html4/loose" <html> <éad- head> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8"> <! - bootstrap -> <link href = "ressource / bootstrap / css / bootstrap.min.css" rel = "stylesheet" media = "screen"> <lingot href = "Resource / bootstrap / css / bootstrap-theme.min.css" rel = "Stylesheet" media = "screen"> <title> js framework apprentissage </ title> </ head> <body onload = "LoadUserDatas ()"> <div> <Table Id = "Table> <ption> <h2> Exercice 1 </ h2> 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);"> delete </ bouton> <bouton type = "bouton" id = "user_edit" data-toggle = "modal" data-target = "# mymodal" onclick = "optionUserData (this);"> modifier </futton> <bouton type = "Button" id = "user_find" onclick = "optionUserData (this);"> query </ bouton> <entrée type = "text" id = "s_code" PlaceHolder = "Query par le numéro de working" id = "S_Username" placeholder = "Query by name"> <input type = "text" id = "s_all" placeholder = "Recherche de texte complet"> </sgenction> <th> <Tr> <th> numéro de série </th> <th> Mot de travail </th> <th> </ th> <th> Gender </ th> <th> Mot de passe </th> </tr> </ thead> <tbody id = "tbody"> </ tbody> </ table> <! - modal box (modal) -> <div id = "mymodal" role = "dialog"> <div> <v> <v> <button type = "Button" data-dismiss = "modal" aria-hidden = "true"> × </ bouton> Utilisateur </h4> </ div> <div id = "modal-body"> <label for = "name"> Numéro de travail: </ label> <entrée type = "text" id = "m_code" placeholder = "s'il vous plaît entrez le numéro de travail"> <label for = "name"> name: </ label> <input type = "text" id = "m_userName" PlaceHolder = "s'il vous plaît entrer un nom"> <texte pour = "M_USERNE" PlaceHolder = " <input type = "text" id = "m_sex" placeholder = "s'il vous plaît entrez un genre"> <label for = "name"> mot de passe: </ label> <entrée type = "text" id = "m_password" placeholder = "s'il vous plaît entrez un mot de passe"> <label pour = "name"> Âge: </ label> <entrée type = "text" id = "m_age" PlaceHolder = " naissance: </bable> <entrée type = "text" id = "m_birthday" placeholder = "Veuillez saisir la date de naissance"> </div> <div> <bouton type = "Button" Data-Dismiss = "Modal"> Enregistrer </ Button> <Button Type = "Button"> Soumettre les modifications </ Button> </ Div> </ Div> <! - /. <! - JS associé doit être introduit ici, il est très important, veuillez vous souvenir -> <script type = "text / javascript" src = "Resource / jQuery / jQuery.js"> </ script> <script type = "Text / javascript" src = "Resource / bootstrap / js / bootstrap.min.js"> </ / script> src = "index.js"> </ script> </ body> </html> Copier CODE COPY CODE // Stockage Tous les utilisateurs Var Users = Users || {}; // Type d'opération var opéraType = ""; // Objet de recherche de stockage var searchusers = searchusers || {}; // Méthode du constructeur utilisateur var user = {create: function (code, nom d'utilisateur, sexe, mot de passe, âge, anniversaire) {this.code = code; this.userName = nom d'utilisateur; this.sex = sexe; this.password = mot de passe; this.age = âge; this.birthday = anniversaire; }, // ajouter l'utilisateur addUserData: function () {if (this.code! = "") {Utilisateurs [this.code] = this; }}, // supprimer l'utilisateur DeleteUserData: function () {for (var i dans les utilisateurs) {if (this.code == utilisateurs [i] .code) {delete users [i]; }}}, // modifier l'utilisateur editUserData: function () {for (var i dans les utilisateurs) {if (this.code == utilisateurs [i] .code) {utilisateurs [i] .Username = this.userName; utilisateurs [i] .sex = this.sex; utilisateurs [i] .password = this.password; utilisateurs [i] .birthday = this.birthday; utilisateurs [i] .age = this.age; }}}, // Recherchez l'utilisateur finseserData: fonction (data) {for (var i dans les utilisateurs) {if (data.code.indexof (utilisateurs [i] .code)> = 0 || data.username.indexof (utilisateurs [i] .UserName)> = 0) {searchusers [utilisateurs [i] .code] = utilisateurs [i]; RefreshDatas (Searchuseurs); }}}}}}}; fonction new (aclass, aparams) {fonction new _ () {aclass.create.Apply (this, aparams); } new_.prototype = aclass; retourner new new_ (); } // Bootstrap Modal Box Event $ ('# myModal'). On ('hide.bs.modal', function () {// Exécuter certaines actions ... var inputElements = this.getElementsByTagName ("input"); var userarr = []; pour (var i = 0; i <inputElements.Length; i ++) {userArt = New (UserAr); / ** * First Chargement de la méthode d'exécution de la page * / Function LoadUserDatas () {var userArray = inUserDatas (); AddRowData (userArray); RefreshDatas (utilisateurs); } / ** * Initialiser les données utilisateur * / fonction inUserDatas () {var inUSURE1 = new (utilisateur, ["1001", "xiaolan", "femelle", "1234", "13", "1991-1-1"]); var initier2 = new (utilisateur, ["1002", "xiaoyi", "mâle", "1234", "13", "1991-1-1"]); var initier3 = new (utilisateur, ["1003", "orchid", "féminin", "1234", "13", "1991-1-1"]); var initier4 = new (utilisateur, ["1004", "Laner", "Female", "1234", "13", "1991-1-1"]); utilisateurs [initiateur1.code] = initiateur1; utilisateurs [initiateur2.code] = initiateur2; utilisateurs [initiateur3.code] = initiateur3; utilisateurs [initiateur4.code] = initiateur4; retourner les utilisateurs; } / ** * Ajoutez une ligne de données HTML à la table * / fonction addRowData (dataS) {var tBodyElement = document.getElementById ("tBody"); var html = ""; var color = "avertissement"; var flag = true; pour (var i dans dataS) {if (flag) {color = "info"; } else {color = "avertissement"; } html = html + "<tr class = '" + couleur + "'> <td style = 'width: 30px;'> <input type = 'checkbox'> </ td> <td id = 'code'>" + datas [i] .code + "</ td> <td id = 'username'>" + datas [i]. id = 'sexe'> "+ datas [i] .sex +" </td> <td id = 'mot de passe'> "+ datas [i] .password +" </td> <td id = 'age'> "+ datas [i] .age +" </td> <td id = 'anniversaire'> "+ datas [i] .birthday +" </td> "+" <tr> "; Flag =! Flag; // Conversion de couleur} tBodyElement.InnerHtml = html; } / ** * Refresh Données utilisateur * / fonction RefreshDatas (données) {addRowData (datas); }; / ** * Collectez une ligne de données * / fonction CollectionRowData (param) {var tdelement = param.getElementsByTagName ("td"); var userarr = []; for (var i = 1; i <tdelement.length; i ++) {var temp = tdelement [i] .textContent; userArr [i-1] = temp; } var user = new (user, userarr); RETOUR UTILISATEUR; } / ** * Méthode de l'opération utilisateur * / fonction optionUserData (param) {// Get Operation catégorie var optionType = param.getAttribute ("id"); if (optionType == "user_add") {opératorType = "add"; } else if (optionType == "user_delete") {var checkRowData = isCheckEdData (); var user = CollectionRowData (CheckRowData); user.deleteUserData (); RefreshDatas (utilisateurs); } else if (optionType == "user_edit") {opératorType = "edit"; var checkRowData = isCheckEdData (); var user = CollectionRowData (CheckRowData); var modal_body = document.getElementById ("modal-body"); var inputElements = modal_body.getElementsByTagName ("input"); pour (var i = 0; i <inputElements.length; i ++) {var temp = inputElements [i] .id.substring (2, inputElements [i] .id.length) inputElements [i] .value = user [temp]; }} else if (optionType == "user_find") {var s_code = document.getElementByid ("s_code"). valeur; var s_username = document.getElementById ("s_username"). valeur; var s_all = document.getElementById ("S_ALL"). Valeur; // Recherche de données var s_data = s_data || {}; s_data.code = s_code; S_DATA.USERNAME = S_USERNAME; s_data.all = s_all; var user = new (utilisateur, []); user.finDuserData (S_DATA); } else {}} / ** * Si vous devez sélectionner les données, renvoyez la ligne des données sélectionnées * / fonction isCheckEdData () {var tBodyElement = document.getElementById ("tBody"); var trelements = tBodyElement.getElementsByTagName ("tr"); var flag = false; pour (var i = 0; i <trelements.length; i ++) {var inputElement = Trelements [i] .getElementsByTagName ("input") [0]; if (inputElement.checked) {flag = true; Retour Trelements [i]; }} if (! Flag) {alert ("Veuillez sélectionner un enregistrement!"); $ ('# myModal'). Unbind ("on"); }}Image de reproduction:
Si vous souhaitez toujours apprendre en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher deux sujets passionnants: Tutoriel d'apprentissage bootstrap Tutoriel Bootstrap
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.