질문 : 기본 J를 사용하여 추가, 삭제, 수정 및 검색의 기본 기능을 구현하는 방법은 무엇입니까? ? ?
문제를 해결하십시오
JS에 이미 특정 기초가있는 경우
부트 스트랩을위한 특정 기초가있는 경우
다음은 구체적인 예이며
두 개의 파일이 포함되어 있습니다 (index.jsp 및 index.js)
<%@ page language = "java"contmenttype = "text/html; charset = utf-8"pageencoding = "utf-8"%> <! doctype html public "-// w3c // dtml 4.01 transitional // en" "http://www.w3.org/tr/tml/html 4/tml/html 4/tml 4.html/html 4.tml. <html> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"> <! <!-bootstrap-> <link href = "resource/bootstrap/css/bootstrap.min.css"rel = "screen"> <링크 " href = "resource/bootstrap/css/bootstrap-theme.min.css"rel = "stylesheet"media = "screen"> <title> js 프레임 워크 학습 </title> </head> <body onload = "loaduserdatas ()"> <div> <table id = "table"> <appinking 1 </h2> </caption> type = "button"id = "user_add"data-toggle = "modal"data-target = "#myModal"onclick = "옵션 사용자 다타 (this);"> add </button> <button type = "id ="user_delete "onclick ="옵션 사용자 data (this); "> delete> <버튼 유형" data-target = "#myModal"onclick = "옵션 사용자 다타 (this);"> edit </button> <버튼 유형 = "button"id = "user_find"onclick = "옵션 서서드타 (this);"> query </button> <input type = "text"id = "s_code"placeholder = "input type ="text "input type ="text ""input type = "indpind"> 자리 표시기 = "이름으로 쿼리"> <입력 유형 = "텍스트"id = "s_all"자리 표시 자 = "전문 검색"> </캡션> <tr> <tr> <tr> <th> 일련 번호 </th> <th> 작업 번호 </th> <th> name </th> <th> gender </th> <th> password </th> <th> <th> <th> date <th> <th> <th> <th> </thead> <tbody id = "tbody"> </tbody> </table> </table> <!-Modal Box (modal)-> <div id = "myModal"role = "dialog"> <div> <div> <div> <버튼 유형 = "button"data-dismiss = "modal"aria-hidden = "true"> </button> <4 id = "mymodallabel" "mymodalbel. </div> <div id = "modal-body"> <label for = "name"> 작업 번호 : </label> <input type = "text"id = "m_code"placeholder = "Work Number를 입력하십시오"> <label "> <name"> name : </label> <input 유형 = "m_username"placeholder = "please a name"> gender : <inpute : <inpute : <inpoty : type = "text"id = "m_sex"placeholder = "Gender를 입력하십시오"> <label for = "name"> password : </label> <입력 유형 = "text"id = "m_password"placeholder = "please a password"> <label "> ag : </label> <input type ="text "id ="id = "place" birth : </label> <input type = "text"id = "m_birthday"placeholder = "생년월일을 입력하십시오"> </div> <div> <버튼 = "button"data-dismiss = "modal"> save </div> <button type = "button"> 제출 </button> </div> <!-/. </div> <!-관련 js를 여기에 소개해야합니다. 매우 중요합니다-> <script type = "text/javaScript"src = "resource/jquery/jquery.js"> </script> <script type = "text/javaScript"src = "resource/bootstrap/js/bootstap.min.js"> type = "text/javaScript"src = "index.js"> </script> </body> </html> 복사 코드 복사 코드 // 모든 사용자 var users = user || {}; // 작동 유형 var operateType = ""; // 저장 검색 객체 var searchUsers = searchUsers || {}; // 사용자 생성기 메소드 var user = {create : 함수 (코드, 사용자 이름, 성별, 암호, 연령, 생일) {this.code = code; this.username = username; this.sex = 섹스; this.password = 비밀번호; this.age = age; this.birthday = 생일; }, // used addUserData 추가 : function () {if (this.code! = "") {users [this.code] = this; }}, // user deleteuserData : function () {for (var i in user) {if (this.code == user [i] .code) {사용자 [i]; }}}, // user edituserData 편집 : function () {for (var i in user) {if (this.code == user [i] .code) {user [i] .username = this.username; 사용자 [i] .sex = this.sex; 사용자 [i] .Password = this.Password; 사용자 [i] .birthday = this.birthday; 사용자 [i] .age = this.age; }}}, // 사용자 findUserData를 찾는다 : findUserData : 함수 (data) {for (var i in user) {if (data.code.indexof (user [i] .code)> = 0 || data.username.indexof (user [i] .username)> = 0) {searchusers [i] .code] = user [i]; RefreshDatas (SearchUsers); }}}}}}}}; 기능 new (aclass, aparams) {함수 new _ () {aclass.create.apply (this, aparams); } new_.prototype = aclass; 새로운 new_ ()를 반환합니다. } // bootstrap modal box event $ ( '#myModal'). on ( 'hide.bs.modal', function () {// 일부 작업 ... var inputElements = this.getElementsByTagName ( "input"); var userARR = []; for (for I <inputElements.length; i ++) {interarments [i]. var user = user adupty (user); / *** 페이지 실행 방법의 첫 번째로드*/ function roduserDatas () {var userArray = initUserDatas (); addrowdata (userArray); RefreshDatas (사용자); } / *** 사용자 데이터 초기화* / function initUserDatas () {var initUser1 = new (user, [ "1001", "Xiaolan", "여성", "1234", "13", "1991-1-1"); var inituser2 = new (user, [ "1002", "xiaoyi", "male", "1234", "13", "1991-1-1"]); var inituser3 = new (user, [ "1003", "난초", "여성", "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 데이터 행을 테이블에 추가* / function addrowdata (datas) {var tbodyElement = document.getElementById ( "tbody"); var html = ""; var color = "경고"; var flag = true; for (datas in datas) {if (flag) {color = "info"; } else {color = "경고"; } html = html + "<tr class = '" + color + "'> <td style = 'width : 30px;'> <입력 유형 = 'checkbox'> </td> <td id = 'code'>" + datas [i] .code + "</td> <td '>" + datas [i] .username + ".username +".username + ". id = 'sex'> " +datas [i] .sex +"</td> <td id = 'password'> " +datas [i] .Password +"</td> <td id = 'age'> " +datas [i] .age +"</td> <td id = '생일'> " +datas [i]. flag =! flag; // 색상 변환} tbodyElement.innerhtml = html; } / *** 사용자 데이터 새로 고침* / 기능 RefreshDatas (datas) {addrowdata (datas); }; / *** 데이터 행을 수집*/ 함수 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] = 온도; } var user = new (user, userarr); 리턴 사용자; } /*** 사용자 작동 방법* /function OptionUserData (param) {// 작업 범주 var 옵션 유형 = Param.getAttribute ( "id"); if (OptionType == "user_add") {OperatorType = "add"; } else if (OptionType == "user_delete") {var checkrowdata = ischeckedData (); var user = CollectionRowData (CheckrowData); user.deleteuserData (); RefreshDatas (사용자); } else 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"); 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"). 값; var s_username = document.getElementById ( "s_username"). 값; var s_all = document.getElementById ( "s_all"). 값; // 데이터 검색 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; for (var i = 0; i <trelements.length; i ++) {var inputElement = trelements [i] .getElementsByTagName ( "input") [0]; if (inputElement.checked) {flag = true; 반환 트리멘트 [i]; }} if (! flag) {alert ( "레코드를 선택하십시오!"); $ ( '#myModal'). Unbind ( "on"); }}생식 이미지 :
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.