Haga una pregunta : ¿Cómo usar JS nativo para implementar funciones básicas de agregar, eliminar, modificar y buscar? ? ?
Resolver el problema
Si ya tiene una cierta base en JS
Si tiene una cierta base para bootstrap
A continuación hay ejemplos específicos,
Contiene dos archivos (index.jsp e index.js)
<%@ page lenguaje = "java" contentType = "text/html; charset = utf-8" PageEncoding = "utf-8"%> <! DocType html public "-// w3c // dtd html 4.01 transición // en" "http://www.w3.org/tr/html4/loos.dttd <html> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <!-bootstrap-> <link href = "recurse/bootstrap/css/bootstrap.min.csss" relehet "medios de medios =" pantalla "> <Link Link <ink <ink <ink <ink <ink <ink <ink <ink <ink <ink <ink <ink <ink <ink <ink <ink <ink <ink <ink <ink <link Link" Link. href = "resource/bootstrap/css/bootstrap-theme.min.css" rel = "stylesheet" medios = "pantalla"> <title> JS Framework Learning </title> </head> <body onload = "loadUserDatas ()"> <div> <table id = "table"> <caption> <h2> ejercicio 1 </h2> </caption> type = "Button" id = "use_add" data-toggle = "modal" data-target = "#mymodal" onClick = "optionUserData (this);"> Agregar </botón> <botón type = "botón" id = "use_delete" onClick = "optionUserData (this);"> delete </button> <button type = "button" id = "use_eSeStey" onclick "dataSerData (this);"; delete </button> <button type = "button" Id = "use_eS_edit" data "data =" data "data =" data "data =" data " data-target = "#mymodal" onClick = "optionUserData (this);"> editar </boton> <button type = "button" id = "user_find" onClick = "optionUserData (this);"> consulta </botón> <input type = "text" id = "s_code" placeholder = "consulta numero" placeHolder = "Query by Name"> <input type = "text" id = "s_all" placeholder = "búsqueda de texto completo"> </tittion> <thead> <tr> <th> número de serie </th> <th> número de trabajo </th> <th> name </th> <th> género </th> <th> contraseña </th> <th> enve <tbody id = "tbody"> </tbody> </table> <!-Modal Box (modal)-> <div id = "mymodal" role = "diálogo"> <div> <div> <div> <button type = "button" data-dismiss = "modal" aria-hidden = "true"> × </botón <h4 id = "mymodallabel"> newewel ">/h4/h4 User </H4/HIVIn id = "Modal-Body"> <Label for = "Name"> Número de trabajo: </etiqueta> <input type = "text" id = "m_code" placeholder = "por favor ingrese el número de trabajo"> <etiqueta for = "name"> name: </selk> <input type = "text" id = "m_username" tholderment = "por favor ingrese un nombre"> <etiqueta name "> gender: </<tabel> <eting> type type" text "" id = "m_sex" placeholder = "por favor ingrese un género"> <etiqueta for = "name"> contraseña: </etiqueta> <input type = "text" id = "m_password" placeholder = "Por favor, ingrese una contraseña"> <etiqueta for = "name"> edad: </label> <input type = "text" id = "m_age" placeholder = "por favor ingrese una edad" <labelse para = "n. type = "text" id = "m_birthday" placeHolder = "Por favor ingrese la fecha de nacimiento"> </div> <div> <button type = "botón" data-dismiss = "modal"> guardar </botón> <button type = "button"> Envíe los cambios </botón> </div> </div> <!-/.modal-content-> </div> <1!-/.modal-</div> </div> <!- Para introducirse aquí, es muy importante, recuerde-> <script type = "text/javaScript" src = "resource/jQuery/jQuery.js"> </script> <script type = "text/javascript" src = "recursos/bootstrap/js/bootstrap.min.js"> </script> <script tipo = "text/javaScript" " src = "index.js"> </script> </body> </html> Copiar código Copiar código // almacenamiento Todos los usuarios VAR Usuarios = usuarios || {}; // Tipo de operación VAR OperateType = ""; // Objeto de búsqueda de almacenamiento VAR SearchUsers = SearchUsers || {}; // Método del constructor de usuarios var user = {create: function (código, nombre de usuario, sexo, contraseña, edad, cumpleaños) {this.code = code; this.Username = UserName; this.sex = sexo; this.password = contraseña; this.age = edad; this.birthday = cumpleaños; }, // Agregar user addUserData: function () {if (this.code! = "") {Users [this.code] = this; }}, // Eliminar el usuario deleteuserData: function () {for (var i en usuarios) {if (this.code == ussers [i] .code) {eliminar usuarios [i]; }}}, // editar el usuario edituserData: function () {for (var i en usuarios) {if (this.code == users [i] .code) {users [i] .Username = this.username; usuarios [i] .sex = this.sex; usuarios [i] .password = this.password; usuarios [i] .birthday = this.birthday; usuarios [i] .age = this.age; }}}, // busque el usuario finduserData: function (data) {for (var i en ussers) {if (data.code.indexof (users [i] .code)> = 0 || data.username.indexof (users [i] .username)> = 0) {búsqueda [usuarios [i] .code] = usuarios [i];; Refreshdatas (Searchusers); }}}}}}}; function new (aclass, aparams) {function new _ () {aclass.create.apply (this, aparams); } new_.prototype = aclass; devolver nuevo new_ (); } // Bootstrap Modal Box Event $ ('#mymodal'). on ('hide.bs.modal', function () {// Ejecutar algunas acciones ... var inputelements = this.getElementsByTagName ("input"); var userOr = []; for (var i = 0; i <inputelements.length; i ++) {ISURSARR [i] = Inputelements = Nuevo (usuario, UserARR); / *** Primera carga del método de ejecución de la página*/ function loadUserDatas () {var userArray = inituserDatas (); AddRowData (UserArray); Refreshdatas (usuarios); } / *** Inicializar datos del usuario* / function inituserDatas () {var inituser1 = new (user, ["1001", "xiaolan", "femenino", "1234", "13", "1991-1-1"]); var inituser2 = new (usuario, ["1002", "xiaoyi", "masculino", "1234", "13", "1991-1-1"]); var inituser3 = new (usuario, ["1003", "orquídea", "femenino", "1234", "13", "1991-1-1"]); var inituser4 = new (usuario, ["1004", "Laner", "femenino", "1234", "13", "1991-1-1"]); usuarios [inituser1.code] = inituser1; usuarios [inituser2.code] = inituser2; usuarios [inituser3.code] = inituser3; usuarios [inituser4.code] = inituser4; devolver usuarios; } / *** Agregue una fila de datos html a la tabla* / function addRowData (datos) {var tbodyElement = document.getElementById ("tbody"); var html = ""; var color = "advertencia"; var flag = true; for (var i en datos) {if (flag) {color = "info"; } else {color = "advertencia"; } html = html + "<tr class = '" + color + "'> <td style = 'width: 30px;'> <input type = 'checkbox'> </td> <td id = 'code'>" + dataS [i] .code + "</td> <td id = 'username'>" + datas [i] .username + "<td> <td> </td> <td id = 'username'>" + datas [i] .username + "<td> <td> </td> <td id = 'username'>" + datas [i].) id = 'Sex'> " +DataS [i] .sex +" </td> <td id = 'contraseña'> " +datas [i] .password +" </td> <td id = 'edad'> " +dataS [i] .age +" </td> <td id = 'cumpleaños'> " +datos [i] .Birthday +" </td> " +" </tr> "</" </"</TR>"; flag =! } / *** Actualizar datos de usuario* / function RefreshDatas (DataS) {addrowData (datos); }; / *** recopilar una fila de datos*/ function 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); devolver el usuario; } /*** Método de operación de usuario* /function OppectionUserData (param) {// Obtener la categoría de operación var optionType = param.getAttribute ("id"); if (optionType == "user_add") {operatortype = "agregar"; } else if (optionType == "user_delete") {var chechRowData = isCheckedData (); VAR user = CollectionRowData (checkrowData); user.deleteUserData (); Refreshdatas (usuarios); } else if (optionType == "user_edit") {operatortype = "editar"; var chechRowData = isCheckedData (); VAR user = CollectionRowData (checkrowData); var modal_body = document.getElementById ("Modal-Body"); var inputelements = modal_body.getElementsBytagName ("entrada"); for (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"). valor; var s_username = document.getElementById ("s_username"). valor; var s_all = document.getElementById ("s_all"). valor; // Buscar datos var s_data = s_data || {}; s_data.code = s_code; S_DATA.USERNAME = S_USERNAME; s_data.all = s_all; VAR user = new (usuario, []); user.finduserData (s_data); } else {}} / *** Si para seleccionar datos, devuelve la fila de los datos seleccionados* / function isCheckedData () {var tbodyElement = document.getElementById ("tbody"); var trelements = tbodyElement.getElementsBytagName ("tr"); var flag = false; for (var i = 0; i <trelements.length; i ++) {var inputelement = trelements [i] .getElementsByTagName ("input") [0]; if (inputelement.ecked) {flag = true; devolver trelementos [i]; }} if (! flag) {alerta ("¡Seleccione un registro!"); $ ('#mymodal'). Unbind ("on"); }}Imagen de reproducción:
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntar dos temas emocionantes a usted: Tutorial de aprendizaje Bootstrap Bootstrap Tutorial práctico
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.