Faça uma pergunta : como usar o JS nativo para implementar funções básicas de adição, exclusão, modificação e pesquisa? ? ?
Resolva o problema
Se você já tem uma certa base em JS
Se você tem uma certa base para o bootstrap
Abaixo estão exemplos específicos,
Contém dois arquivos (index.jsp e index.js)
<%@ página linguagem = "java" contentType = "text/html; charset = utf-8" PageEncoding = "utf-8"%> <! <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <!-bootstrap-> <link href = "Resource/bootstrap/css/bootstrap.min.css" rel = "estilosheet" " href="resource/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen"> <title>JS framework learning</title> </head> <body onload="loadUserDatas()"> <div> <table id="table"> <caption><h2>Exercise 1</h2></caption> <caption> <button type = "Button" id = "user_add" data-toggle = "modal" data-target = "#mymodal" onclick = "optionUserData (this);"> add </button> <botão tipo = "button" idese = "user_delete" onClick = "optionUserData (the Id);"> DeLete <///user_delete "OnClick =" OptionUserData (this); "> DeLete <///"> data-toggle = "modal" data-target = "#myModal" onclick = "optionUserData (this);"> editar </butut> <botão tipo = "button" id = "user_find" onclick = "optionUserData (this);"> query </button> <input typet = "thext" idi "" sMOR "", ",", ",", ", time" typT) (timer) (time "timer (timer) (time" timer (timer ",", ",", ", time", typ (typer) typ (typT) (time) typ (timer) timer (typT) (timer (timer) (timer) (timer) (timer) (timer) (timer) (timer) (timer) (timer) (timer) id = "s_username" placeholder = "consulta by name"> <input type = "text" id = "s_all" espaço reservado = "pesquisa de texto completo"> </picção> </sead> <tr> <the> número <th> </thy <thy> <Th> </thy <thy <thy Nascimento </th> </tr> </thead> <tbody id = "tbody"> </tbody> </tabela> <!-caixa modal (modal)-> <div id = "mymodal" role = "dialog"> <div> <div> <div> <butão "" ""> "> <div> <div> <div> <div> <butt typen tybrot = dismiss =" modal "> <diven>" TrueN> "TrueN>"> <div> <butt typen tybrot = dismiss = "modal"> <diven> "TrueN>" TrueN> "TrueN> <div> <butão" "". Usuário </h4> </div> <div id = "Modal-Body"> <Label para = "Nome"> Número de trabalho: </cret> <input type = "text" id = "m_code" placeholder = "por favor, digite o trabalho"> <belame para = "name"> name: </label> <typ typ = "text" id = "m_username" "> Para = "Nome"> Gênero: </etiqueta> <input type = "text" id = "m_sex" espaço reservado = "digite um gênero"> <gravador para = "name"> senha: </elbel> <input type = "text" iD = "m_password" "PlaceHolder =" Por favor, digite uma senha "> <bel" "nome"> idade: "" </">" </">" M_PASSWORD ". Uma idade "> <Label para =" Nome "> Data de nascimento: </elabel> <input type =" text "id =" m_birthday "placeholder =" Por favor, digite a data do nascimento "> </div> <div> <botão do botão =" Botão "" e ">/buttão <butão-butão! </div> <!-/.modal-> </div> <!-Js relacionado precisa ser introduzido aqui, é muito importante, lembre-se-> <script type = "text/javascript" src = "Resource/jQuery/jQuery.js"> </script> <script type = "text/javascript" src = "Resource/bootstrap/js/bootstrap.min.js"> </script> <script type = "text/javascript" src = "index.js"> </script> </body> </html> copie código copie // armazenamento todos os usuários var = | {}; // Tipo de operação var Operatetype = ""; // Objeto de pesquisa de armazenamento Var SearchUsers = SearchUsers || {}; // Método do construtor do usuário var user = {create: function (código, nome de usuário, sexo, senha, idade, aniversário) {this.code = code; this.UserName = Nome de usuário; this.sex = sexo; this.password = senha; this.age = idade; this.birthday = aniversário; }, // Adicione o usuário addUserData: function () {if (this.code! = "") {Usuários [this.code] = this; }}, // Exclua o usuário DeleteUserData: function () {for (var i em usuários) {if (this.code == users [i] .code) {exclua usuários [i]; }}}, // edite o usuário editUserData: function () {for (var i em usuários) {if (this.code == users [i] .code) {usuários [i] .username = this.username; usuários [i] .sex = this.sex; usuários [i] .password = this.password; usuários [i] .birthday = this.birthday; usuários [i] .age = this.age; }}}, // Encontre o usuário findUserData: function (data) {for (var i em usuários) {if (data.code.indexof (usuários [i] .code)> = 0 || data.username.indexof (usuários [i] .username)> = 0) {pesquisadores [[i]. refreshdatas (buscas); }}}}}}}; função new (aclass, aparams) {função new _ () {aclass.create.apply (this, aparams); } new_.prototype = aclass; retornar new new_ (); } // bootstrap modal box event $ ('#mymodal'). on ('hide.bs.modal', function () {// Execute algumas ações ... var inputElements = this.getElementsByTagName ("input"); var userArr = []; para (var i = 0; i <inputEnmentS.LlingLengthen; } var user = userrr); / *** Primeira carregamento do método de execução da página*/ função loadUserDatas () {var userArray = initUserDatas (); addrowdata (userArray); refreshdatas (usuários); } / *** Inicialize os dados do usuário* / função initUserDatas () {var initUser1 = new (usuário, ["1001", "xiaolan", "feminino", "1234", "13", "1991-1-1"]); var initUser2 = novo (usuário, ["1002", "xiaoyi", "masculino", "1234", "13", "1991-1-1"]); var initUser3 = novo (usuário, ["1003", "orchid", "feminino", "1234", "13", "1991-1-1"]); var initUser4 = novo (usuário, ["1004", "Laner", "feminino", "1234", "13", "1991-1-1"]); usuários [initUser1.code] = initUser1; usuários [initUser2.code] = initUser2; usuários [initUser3.code] = initUser3; usuários [initUSER4.code] = initUser4; devolver usuários; } / *** Adicione uma linha de dados html à tabela* / função addRowData (dados) {var var html = ""; var color = "aviso"; var flag = true; para (var i em dados) {if (flag) {color = "info"; } else {color = "aviso"; } html = html + "<tr class = '" + color + "'> <td style = 'width: 30px;'> <input type = 'caixa de seleção'> </td> <td id = 'code'>" + dados [i] .code + "</td> <td id = 'username'>" id = 'sexo'> " +dados [i] .Sex +" </td> <td id = 'senha'> " +datas [i] .password +" </td> <td id = 'idade' " +dados [i]. sinalizador =! sinalizador; // conversão de cores} tbodyElement.innerhtml = html; } / *** Atualizar dados do usuário* / função refreshData (dados) {addRowData (dados); }; / *** Colete uma linha de dados*/ função 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 (usuário, usuário); devolver usuário; } /*** Método de operação do usuário* /função OptionUserData (param) {// Categoria de operação GET 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 (usuários); } else if (optionType == "user_edit") {OperAtorType = "Edit"; var checkRowData = isCheckedData (); var user = collectionRowData (checkRowData); var modal_body = document.getElementById ("modal-corpo"); var inputElements = modal_body.getElementsByTagName ("input"); para (var i = 0; i <inputElements.length; i ++) {var temp = inputElements [i] .id.substring (2, inputElements [i] .id.length) inputElements [i] .value = usuário [temp]; }} else if (optionType == "user_find") {var s_code = document.getElementById ("s_code"). var s_username = document.getElementById ("s_username"). value; var s_all = document.getElementById ("s_all"). // Pesquise dados var s_data = s_data || {}; s_data.code = s_code; s_data.username = s_username; s_data.all = s_all; var user = new (usuário, []); user.findUserData (s_data); } else {}} / *** Se você deve selecionar dados, retornar a linha dos dados selecionados* / função isCheckedData () {var 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.Checked) {flag = true; devolver trelements [i]; }} if (! Flag) {alert ("Selecione um registro!"); $ ('#myModal'). Unpind ("on"); }}Imagem de reprodução:
Se você ainda deseja aprender em profundidade, clique aqui para aprender e anexar dois tópicos interessantes a você: Bootstrap Learning Tutorial Bootstrap Tutorial Practical Tutorial
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.