Ajukan pertanyaan : Bagaimana cara menggunakan JS asli untuk mengimplementasikan fungsi dasar menambah, menghapus, memodifikasi, dan mencari? ? ?
Menyelesaikan masalahnya
Jika Anda sudah memiliki fondasi tertentu di JS
Jika Anda memiliki dasar untuk bootstrap
Di bawah ini adalah contoh spesifik,
Berisi dua file (index.jsp dan index.js)
<%@ page language = "java" contentType = "text/html; charset = utf-8" pageEncoding = "utf-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transisi // en" "http://www.w3.org/org/ht4/t." <html> <head> <meta http-equiv = "konten-tipe" content = "text/html; charset = utf-8"> <!-bootstrap-> <tautan href = "sumber daya/bootstrap/css/bootstrap.min.css" rel = "stylesheet" media = "skrining"/bootstrap. 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 = "tombol" id = "user_add" data-koggle = "modal" data-target = "#mymodal" ontClick = "optionUserData (this);"> Tambahkan </button> <tombol type = "tombol" id = "user_delete" onclick = "optionUserData (ini);"> delete </delete </Button "onclick =" uckoneSerData (this); "> delete </delete </Button" onclick = "" "ID" ID = "ID =" "Delete </delete </delete </Button" data-toggle="modal" data-target="#myModal" onclick="optionUserData(this);">Edit</button> <button type="button" id="user_find" onclick="optionUserData(this);">Query</button> <input type="text" id="s_code" placeholder="Query by work number"> <input type="text" id="s_userName" placeholder="Query by name"> <input type="text" id="s_all" placeholder="Full text search"> </caption> <thead> <tr> <th>Serial number</th> <th>Work number</th> <th>Name</th> <th>Gender</th> <th>Password</th> <th>Age</th> <th>Date of Kelahiran </tr> </tr> </thead> <tbody id = "tbody"> </tbody> </boable> <!-Kotak Modal (Modal)-> <Div id = "mymodal" role = "dialog"> <div> <div> <Div> <kancing tipe = "Tombol" Data-dismiss = "Modal" Myia-hidden = "Myia-hidden =" Myia-hidden = "Myia-hidden =" Myia-hidden = "Myia-hidden =" Myia-hidden = "Myia-hidden" Pengguna </h4> </div> <div id = "modal-body"> <label untuk = "name"> Nomor kerja: </label> <input type = "text" id = "m_code" placeholder = "Harap masukkan nomor kerja"> <label untuk = "nama"> Nama: </label> <input type = "Text" ID = "M_USERNAME" untuk = "name"> jenis kelamin: </label> <input type = "text" id = "m_sex" placeholder = "silakan masukkan jenis kelamin"> <label untuk = "name"> kata sandi: </label> <input type = "text" id = "m_password" placeholder = "Harap masukkan kata sandi"> <label for = "name"> my = "" Placeholder = "Placinger =" Masuk Kata Sandi "> <label for =" name "> Placingword" Placeholder = "Inpute" <Label "> TEXT" PlaPOGING = "PLAES =" PLAES = "PLAES =" PLACEPLOGER = "TEXT"> TEXT ">" MEPER "> TEKPRETER" PLACETER "TEXTER"> enter a age"> <label for="name">Date of birth:</label> <input type="text" id="m_birthday" placeholder="Please enter the date of birth"> </div> <div> <button type="button" data-dismiss="modal">Save</button> <button type="button">Submit changes</button> </div> </div><!-- /.modal-content --> </div> <!-/.modal-> </div> <!-JS Terkait perlu diperkenalkan di sini, sangat penting, harap diingat-> <script type = "text/javascript" src = "sumber daya/jquery/jQuery.js"> </script> <script = "Teks/JavaScript" src = "sumber daya/bootstrap/js/bootstrap.min.js"> </script> <script type = "text/javaScript" src = "index.js"> </script> </body> </html> Salin kode kode // penyimpanan semua pengguna var pengguna = pengguna || {}; // jenis operasi var operateType = ""; // objek pencarian penyimpanan var searchusers = Searchusers || {}; // Metode konstruktor pengguna var user = {create: function (kode, nama pengguna, jenis kelamin, kata sandi, usia, ulang tahun) {this.code = kode; this.username = nama pengguna; this.sex = seks; this.password = kata sandi; this.age = usia; this.birthday = ulang tahun; }, // Tambahkan addUserData pengguna: function () {if (this.code! = "") {Users [this.code] = this; }}, // hapus pengguna deleteUserData: function () {for (var i in users) {if (this.code == pengguna [i] .code) {hapus pengguna [i]; }}}, // Edit edituserData pengguna: function () {for (var i di pengguna) {if (this.code == pengguna [i] .code) {pengguna [i] .userName = this.username; pengguna [i] .sex = this.sex; pengguna [i] .password = this.password; Pengguna [i] .BIRTHDAY = this.birthday; pengguna [i] .age = this.age; }}}, // temukan pengguna findUserData: function (data) {for (var i in users) {if (data.code.indexof (pengguna [i] .code)> = 0 || data.userName.indexof (pengguna [i] .userName)> = 0) {searchusers [iSer [i] .code] = i] .userName)> = 0) {searchusers [i]. RefreshDatas (Searchusers); }}}}}}}; function new (aclass, aparams) {function new _ () {aclass.create.apply (ini, aparams); } new_.prototype = aclass; mengembalikan new_ (); } // bootstrap Modal Box Event $ ('#myModal'). on ('hide.bs.modal', function () {// Jalankan beberapa tindakan ... var inputElements = this.getElementsbyTagname ("input"); var userarr = []; untuk (var i = 0; i <inputelements.length; } var user = user, userArr); / *** Pemuatan pertama metode eksekusi halaman*/ function loadUserDatas () {var userArray = inituserDatas (); addRowData (userArray); RefreshDatas (pengguna); } / *** Inisialisasi data pengguna* / fungsi inituserDatas () {var inituser1 = baru (pengguna, ["1001", "xiaolan", "betina", "1234", "13", "1991-1-1"]); var inituser2 = baru (pengguna, ["1002", "xiaoyi", "pria", "1234", "13", "1991-1-1"]); var inituser3 = baru (pengguna, ["1003", "anggrek", "wanita", "1234", "13", "1991-1-1"]); var inituser4 = baru (pengguna, ["1004", "laner", "betina", "1234", "13", "1991-1-1"]); pengguna [inituser1.code] = inituser1; pengguna [inituser2.code] = inituser2; pengguna [inituser3.code] = inituser3; pengguna [inituser4.code] = inituser4; Pengguna yang kembali; } / *** Tambahkan baris data html ke tabel* / function addRowData (data) {var tBodyElement = document.geteLementById ("tbody"); var html = ""; var warna = "peringatan"; var flag = true; untuk (var i di data) {if (flag) {color = "info"; } else {color = "warning"; } html = html + "<tr class = '" + color + "'> <td style = 'width: 30px;'> <input type = 'centang kotak'> </td> <td id = 'kode'>" + DATAS [i] .code + "</td> <td id = 'td name'>" + DATAS [i]. id = 'sex'> " +data [i] .sex +" </td> <td id = 'password'> " +data [i] .password +" </td> <td id = 'usia'> " +data [i] .age +" </td> <td = 'ulang tahun'> " +". flag =! flag; // konversi warna} tBodyElement.innerHtml = html; } / *** Segarkan data pengguna* / fungsi refreshDatas (data) {addRowData (dataS); }; / *** Kumpulkan deretan data*/ function collectionrowData (param) {var tdelement = param.getElementsbyTagname ("td"); var userarr = []; untuk (var i = 1; i <tdelement.length; i ++) {var temp = tdelement [i] .textContent; userarr [i-1] = temp; } var user = new (user, userArr); Pengguna Kembali; } /*** Metode operasi pengguna* /function optionUserData (param) {// Dapatkan kategori operasi 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 (pengguna); } 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"); untuk (var i = 0; i <inputeLements.length; i ++) {var temp = inputElements [i] .id.substring (2, inputElements [i] .id.length) inputElements [i] .value = pengguna [temp]; }} lain if (optionType == "user_find") {var s_code = document.getElementById ("s_code"). value; var s_username = document.getElementById ("s_username"). nilai; var s_all = document.geteLementById ("s_all"). value; // Cari data 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 {}} / *** Apakah akan memilih data, mengembalikan baris data yang dipilih* / function isCheckedData () {var tBodyElement = document.getElementById ("tbody"); var trelements = tBodyElement.getElementsByTagname ("tr"); var flag = false; untuk (var i = 0; i <trelements.length; i ++) {var inputElement = trelements [i] .geteLementsByTagname ("input") [0]; if (inputeLement.Checked) {flag = true; return trelements [i]; }} if (! flag) {alert ("Pilih catatan!"); $ ('#myModal'). unbind ("on"); }}Gambar reproduksi:
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan dua topik menarik kepada Anda: Tutorial Pembelajaran Bootstrap Bootstrap Tutorial Praktis
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.