Persyaratannya adalah sebagai berikut:
Tulis halaman HTML dengan formulir yang menyimpan informasi pengguna, termasuk: nama pengguna, kata sandi, nama, email, nomor telepon, QQ, dan nomor ID.
Sekarang kita perlu secara dinamis menambahkan, menghapus, memodifikasi, dan memeriksa tabel melalui JS (hanya operasi memori):
Pertama, gunakan JS untuk memuat 3 catatan inisialisasi saat memuat halaman;
Ada tombol untuk menambahkan catatan, dan setelah mengklik, lapisan div muncul untuk memberikan input, yang mensyaratkan bahwa setiap bidang harus sesuai dengan format input dan tidak dapat kosong:
Nama pengguna: Bahasa Inggris + Angka + Menggariskan;
Kata Sandi: Bahasa Inggris + Angka + Garis Bawah + 6 digit atau lebih;
Nama: Cina;
Email, nomor telepon, qq, dan nomor ID memenuhi format;
Setiap catatan dimodifikasi atau dihapus;
Ubah serupa untuk ditambahkan, dan bacalah nilai aslinya;
Kode Halaman HTML:
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <itement> js add-to-deletion v1.0 </title> <script src = "js/test.js" type = "text/JavaScript" charset = "jsf-8" </test. <br/> <br/> <h2> js add-to-to-deletion v1.0 </h2> <br/> <br/> <a href = "javascript: showaddinput ();"> Tambahkan data </a> <br/> <br/> <v> <Table style = "Text-onign: center" ID = "TABRET"> <TABLE> <TABLE = "TEXT-LOIGN: CENTER" ID = " <TH> Nama </t> <th> Email </th> <t th> Tel </tr> <th> qq </th> <th> Nomor Kartu Identitas </th> <th> operasi </th> </tr> <tr> <td> A1 </td> <td> </td> <t/td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> <td> 123456789 </td> <td> 40040044 </td> <td> 270205197405213513 </td> <td> <a style = "warna: biru; kursor: pointer;" OnClick = "Updaterow (this);" > Ubah <a> <a style = "color: blue; kursor: pointer;" OnClick = "Delrow (this);"> delete </a> </td> </tr> <tr> <td> a2 </td> <td> 456 </td> <td> B </td> <td> B </td> <td> [email protected] </td> <td> 9876 </td> <td> [email protected] </td> <td> 9876 </td> <td> [email protected] </td> <td> 9876 <td> 30030033 </td> <td> 470205197405213513 </td> <td> <a style = "warna: biru; kursor: pointer;" OnClick = "Updaterow (this);"> Modifikasi <a> <a style = "color: blue; kursor: pointer;" OnClick = "Delrow (this);"> delete </a> </td> </tr> <tr> <td> a3 </td> <td> 789 </td> <td> C </td> </td </td> </td> [email protected] </td> <td> </td> <td> [email protected] </td> <td> </td> </td> [email protected] </td> <td> </td> </td> </td </td </td> </td </td> </td </td> </td> </td> </td> </td> </td> </td <td> 570205197405213513 </td> <td> <a style = "color: blue; kursor: pointer;" OnClick = "Updaterow (this);"> Modifikasi </a> </td> </tr> </ablew> </div> <div style = "display: none" id = "addinfo"> <rorm> <br> nama pengguna: (non-non-number "uSEname atau uSname atau uSname <br> <br> <br> <input type =" TEKS = "TEKS =" TEKS = " Dalam Bahasa Inggris Underscore atau Numbers-> Kata Sandi: (Bahasa Inggris + Angka atau Underscore, Panjang Tidak Kurang Dari 6) <br> <Input Type = "Text" ID = "Kata Sandi"/> <br> Nama: (Hanya karakter Cina) <br> <input type = "Text" ID = "Name"/<br> Email: <br> <input type = "Text" email "email" ID = "Telepon"/> <br> qq: <br> <input type = "text" id = "qq"/> <br> kartu id: <br> <input type = "text" id = "uid"/> <br> <br> <input type = "bt" value = "kirim" onclick = "addinfo ()" id = "bt" value = "kirim" onclick = "addinfo ()" id = "bt" value = "kirim" inclick = "addInfo ()" id = "bt" value = "kirim" inclick = "addInfo ()" id = "bt" value = "input" foilpe "input" input "input" input "inpute" input "input =" iD = "bt" bt "" OnClick = "updateInfo ()" style = "display: none" id = "btn_update"> <input type = "Tombol" value = "batal" ontClick = "hideaddinput ()"> </form> </div> </center> </body> </html>
Kode JS:
var row = 0; // Tentukan jumlah baris global untuk memodifikasi var reg_email = /^/w+((-/w+)|(/./w+)*/@hta-za-z0-9 media+(/.|-)....A-Za-z0-9 media-)*/9 heper; // Digunakan untuk menilai format kotak surat var reg_name =/^((/w*/d/w*[az]/w*) | (/w*[az]/w*/d/w*)) $/i; // Digunakan untuk menilai format nama pengguna var reg_chinese =/^[/u0391-/uffe5]+$/; // Digunakan untuk menilai format nama var reg_pass =/^((/w*/d/w*[az]/w*) | (/w*[az]/w*/d/w*)) $/i; // Gunakan untuk menentukan format kata sandi //-dapatkan nomor baris ----- fungsi getrow (r) {var i = r.parentnode.parode.parode.parode. return i;} // --- Dapatkan nomor baris ---- // ---- hapus baris tertentu ------- function delrow (r) { document.getElementById('table').deleteRow(getRow(r));}//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.geteLementById ('username'). value = ''; document.geteLementById ('password'). value = ''; document.geteLementById ('name'). value = ''; document.geteLementById ('email'). value = ''; document.geteLementById ('phone'). value = ''; document.geteLementById ('phone'). value = ''; document.geteLementById ('qq'). value = ''; document.geteLementById ('uid'). value = '';} // ---- hapus konten kotak informasi tambahan -----/---------- Tampilkan kotak Tambah Informasi -------------- Function showAddinput () {document.getElementById ('addinfo'). style = "display: block-inline"; document.geteLementById ('btn_add'). style = "display: block-inline"; document.geteLementById ('btn_update'). style = "display: none"; cleanaddinput (); } // ---- Tampilkan kotak Tambah Informasi -----/---- Sembunyikan Kotak Tambah Informasi ------ Function hideaddInput () {document.geteLementById ('addinfo'). Style = "display: none";} // ---- sembunyikan informasi tambahkan informasi Box----/------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- email = document.geteLementById ('email'). value; var phone = document.geteLementById ('phone'). value; var qq = document.geteLementById ('qq'). nilai; var uid = document.geteLementById ('uid'). nilai; var judge = true; // digunakan untuk menentukan apakah informasi formulir memenuhi jika (nama pengguna == '') {judge = false; Peringatan ('Harap masukkan nama pengguna'); } lain jika (kata sandi == '') {judge = false; Peringatan ('Harap masukkan kata sandi'); } lain jika (name == '') {judge = false; Peringatan ('Harap masukkan nama Anda'); } lain jika (email == '') {judge = false; Peringatan ('Harap masukkan email Anda'); } else if (phone == '') {judge = false; Peringatan ('Harap masukkan telepon Anda'); } lain jika (uid == '') {judge = false; Peringatan ('Harap masukkan kartu ID Anda'); } lain jika (uid.length! = 18) {judge = false; Peringatan ('Harap masukkan kartu ID Anda'); } lain jika (uid.length! = 18) {judge = false; Peringatan ('Kartu identitas harus 18 digit, silakan isi dengan benar'); } else if (qq.length <= 5 && qq.length> = 13) {judge = false; Peringatan ('Harap masukkan nomor QQ dengan benar'); } else if (phone.length <3 && qq.length> 12) {judge = false; Peringatan ('Harap masukkan telepon dengan benar'); } lain jika (! Reg_email.test (email)) {judge = false; Peringatan ('Format email salah'); } else if (! Reg_name.test (username)) {judge = false; Peringatan ('Format Nama Pengguna salah'); } lain jika (! Reg_chinese.test (name)) {judge = false; Peringatan ('Format Nama salah'); } else if ((! Reg_pass.test (kata sandi)) || kata sandi.length <6) {judge = false; peringatan ('format kata sandi salah'); } return judge ;}//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ document.geteLementById ('kata sandi'). nilai; arr [2] = document.geteLementById ('name'). value; arr [3] = document.geteLementById ('email'). nilai; arr [4] = document.getElementById ('phone'). nilai; arr [5] = document.geteLementById ('qq'). nilai; arr [6] = document.geteLementById ('uid'). nilai; arr [7] = "<a style = 'text-align: center; warna: biru; kursor: pointer;' OnClick = 'Updaterow (this);'> Modify </a> <a style = 'text-align: center; warna: biru; kursor: pointer;' OnClick = 'Delrow (this);'> delete </a> "; var x = document.geteLementById ('tabel'). InserTrow (1); // Dapatkan objek baris pertama untuk (var i = 0; i <arr.length; i ++) {x.insertcell (i) .innerHtml = arr [i]; // Masukkan setiap data ke dalam setiap kolom baris pertama dengan loop} } // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- // Tunjukkan Formulir Modifikasi // Kirim tombol untuk mengganti Document.getElementById ('btn_add'). Style = "display: none"; document.geteLementById ('btn_update'). style = "display: block-inline"; InsertInputFromQuery (queryInfobyrow (baris)); } // ---- Ubah informasi berdasarkan nomor baris ---- // ------- file queryInfobyrow (r) {var arr = new array (); untuk (var m = 0; m <7; m ++) {arr [m] = document.geteLementById ('tabel'). Baris [baris] .cells [m] .innerText; } return arr; // mengembalikan data ini garis}//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.geteLementById ('email'). value = arr [3]; document.geteLementById ('phone'). value = arr [4]; document.geteLementById ('qq'). value = arr [5]; document.geteLementById ('uid'). value = arr [6]; } // ---- Masukkan informasi kueri ke dalam formulir yang dimodifikasi ---- function updateInfo () {if (judge () == true) {waspada ('dimodifikasi berhasil'); document.geteLementById ('Table'). Deleterow (baris); // hapus line instanceInfo (); // masukkan nilai hideaddinput () yang dimodifikasi; // hideaddinput (); // hideaddmodule} else {alert ('Modification Failure'); hideaddinput (); }}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.