質問する：ネイティブJSを使用して、追加、削除、変更、検索の基本的な機能を実装する方法は？ ？ ？
問題を解決します
すでにJSに特定の基盤がある場合
ブートストラップの特定の基盤がある場合
以下は具体的な例です。
2つのファイル（index.jspとindex.js）が含まれています
<％@ page Language = "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 = "stylesheet" "medy" href = "resource/bootstrap/css/bootstrap-theme.min.css" rel = "styleSheet" media = "screen"> <title> jsフレームワーク学習</head> <body onload = "loaduserdatas（）" "> <div> <div> <table id =" "テーブル> < type = "button" id = "user_add" data-toggle = "modal" data-target = "＃mymodal" onclick = "optionuserdata（this）;"> add </button> <button = "button" = "user_delete" onclick = "optionSuserdata（this）; data-toggle = "modal" data-target = "＃mymodal" onclick = "optionuserdata（this）;"> edit </button> <button type = "button" id = "user_find" onclick = "optionuserdata（this）;"> query </button> <入力タイプ= "テキスト"> "s_code"> < id = "s_username" placeholder = "query by name by name"> <input type = "text" id = "s_all" placeholder = "フルテキスト検索"> </caption> <thead> <tr> <th> serial番号</th> <th </th> <th> </tr> </thead> <tbody id = "tbody"> </tbody> </table> <！ - モーダルボックス（モーダル） - > <div id = "mymodal" role "lolig =" dialog "> <div> <div> <ボタン=" button "button" data-dismiss = "modal" aria-hidden = "true"> </button </button> </button> </div> <div id = "modal-body"> <label for = "name">作業番号：</label> <入力タイプ= "テキスト" id = "m_code" placeholder = " type = "text" m_sex "placeholder =" "> <label for =" name "> password：</label> <入力タイプ=" text "id =" m_password "placeholder ="> <"name"> "name"> age：</label> <入力タイプ= "ID =" m_age ">" PlageHolder "" Pleshhold = "Plake int" "Pleshhold"出生：</label> <入力タイプ= "Text" id = "m_birthday" placeholder = "> </div> <div> <button type =" button = "data-dismiss =" modal "> save </button> <button =" button "> shing change </button> </div> </div> < < src = "index.js"> </script> </body> </html>コピーコピーコード//ストレージすべてのユーザーvarユーザー=ユーザー|| {}; //操作タイプvar operateType = ""; //ストレージ検索オブジェクトvar searchUsers = searchUsers || {}; // user constructor method var user = {create：function（code、username、sex、password、age、Birthday）{this.code = code; this.username = username; this.sex = sex; this.password = password; this.age = age; this.birthday = Birthday; }、//ユーザーadduserdataを追加：function（）{if（this.code！= ""）{users [this.code] = this; }}、// delete user deleteuserdata：function（）{for（var i in nows）{if（this.code == users [i] .code）{delete users [i]; }}}、//ユーザーedituserData：function（）{for（var i in user）{if（this.code == users [i] .code）{users [i] .username = this.username; users [i] .sex = this.sex; users [i] .password = this.password; users [i] .birthday = this.birthday;ユーザー[i] .age = this.age; }}}、//ユーザーfinduserdata：function（data）{for（var i in users）{if（data.code.indexof（users [i] .code）> = 0 || data.username.indexof（users.username）> = 0）{searchusers [i] code] = users [i]; RefreshDatas（SearchUsers）; }}}}}}}; function new（aclass、aparams）{function new _（）{aclass.create.apply（this、aparams）; } new_.prototype = aclass; new new_（）を返します。 } // bootstrapモーダルボックスイベント$（ '＃mymodal'）。 new（user are）if（operateType "adddata（）; / ***ページ実行方法の最初の読み込み*/ function loaduserdatas（）{var userArray = inituserdatas（）; addrowdata（userArray）; refreshdatas（ユーザー）; } / ***ユーザーデータの初期化* / function inituserdatas（）{var inituser1 = new（user、["1001"、 "xiaolan"、 "female"、 "1234"、 "13"、 "1991-1-1"]）; var inituser2 = new（user、["1002"、 "xiaoyi"、 "male"、 "1234"、 "13"、 "1991-1-1"]）; var inituser3 = new（user、["1003"、 "orchid"、 "female"、 "1234"、 "13"、 "1991-1-1"]）; var inituser4 = new（user、["1004"、 "laner"、 "female"、 "1234"、 "13"、 "1991-1-1"]）; users [inituser1.code] = inituser1; users [inituser2.code] = inituser2; users [inituser3.code] = inituser3; users [inituser4.code] = inituser4;ユーザーを返します。 } / *** htmlデータの行をテーブルに追加* / function addrowdata（datas）{var tbodyelement = document.getElementbyId（ "tbody"）; var html = ""; var color = "警告"; var flag = true; for（var i in datas）{if（flag）{color = "info"; } else {color = "警告"; } html = html + "<tr class = '" + color + "'> <td style = 'width：30px;'> <入力タイプ= 'チェックボックス'> </td> <td id = 'code'>" +データid = 'sex'> " +datas [i] .sex +" </td> <td id = 'password'> " +datas [i] .password +" </td> <td id = 'age'> " +datas [i]。 flag =！flag; //色変換} tbodyElement.innerhtml = html; } / ***ユーザーデータの更新* / function refreshdatas（datas）{addrowdata（datas）; }; / ***データの行を収集*/ 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）;ユーザーを返します。 } /***ユーザー操作方法* /function optionSerdata（param）{//操作カテゴリ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（ユーザー）; } 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"）。value; var s_username = document.getElementById（ "s_username"）。value; var s_all = document.getElementById（ "s_all"）。value; //データの検索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; trelements [i]を返します。 }} if（！flag）{alert（ "レコードを選択してください！"）; $（ '＃mymodal'）。unbind（ "on"）; }}複製画像：
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。