المتطلبات على النحو التالي:
اكتب صفحة HTML مع نموذج يخزن معلومات المستخدم ، بما في ذلك: اسم المستخدم ، كلمة المرور ، الاسم ، البريد الإلكتروني ، رقم الهاتف ، QQ ، ورقم المعرف.
الآن نحتاج إلى إضافة الجدول وحذفه وتعديله والتحقق منه ديناميكيًا من خلال JS (عمليات الذاكرة فقط):
أولاً ، استخدم JS لتحميل 3 سجلات تهيئة عند تحميل الصفحة ؛
يوجد زر لإضافة سجلات ، وبعد النقر ، تنبثق طبقة DIV لتوفير الإدخال ، مما يتطلب أن يتوافق كل حقل مع تنسيق الإدخال ولا يمكن أن يكون فارغًا:
اسم المستخدم: اللغة الإنجليزية + رقم + UnderScore ؛
كلمة المرور: اللغة الإنجليزية + رقم + Underscore + 6 أو أعلى ؛
الاسم: الصينية.
البريد الإلكتروني ورقم الهاتف و QQ ورقم الهوية تلبي التنسيق ؛
يتم تعديل كل سجل أو حذفه ؛
تعديل مماثل لإضافة ، وقراءة القيمة الأصلية ؛
رمز صفحة HTML:
<html> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> js add to-deletion v1.0 </title> <script src = "js/test.js" type = "text/javascrip" <br/> <br/> <h2> js add-to-deletion v1.0 </h2> <br/> <br/> <a href = "javaScript: showaddinput () ؛ <th> الاسم </h> <th> البريد الإلكتروني </th> <th> tel </h> <th> qq </h> <th> رقم بطاقة الهوية </th> <th> العملية </th> </td> <td> <td> a1 </td> <td> 123 </td> a </td> <td> <td> 123456789 </td> <td> 40040044 </td> <td> 270205197405213513 </td> <td> <a style = "اللون: أزرق ؛ مؤشر: مؤشر ؛" onClick = "updaterow (هذا) ؛" > تعديل <a> <a style = "color: Blue ؛ Cursor: Pointer ؛" onClick = "delRow (this) ؛"> redlete </a> </td> </tr> <tr> <td> a2 </td> <td> 456 </td> <td> b </td> <td> b </td> <td> </td> </td> </td> <td> 30030033 </td> <td> 470205197405213513 </td> <td> <a style = "color: Blue ؛ المؤشر: مؤشر ؛" onClick = "updaterow (this) ؛"> تعديل <a> <a style = "color: Blue ؛ Cursor: pointer ؛" onClick = "delRow (this) ؛"> red </a> </td> </tr> <tr> <td> a3 </td> <td> 789 </td> <td> c </td> <td> c </td> <td> <td> 570205197405213513 </td> <td> <a style = "color: Blue ؛ Cursor: pointer ؛" OnClick = "Updaterow (this) ؛"> تعديل </a> </td> </tr> </table> </div> <div style = "display: none" id = "addinfo"> <port> <br> username: (username يمكن استخدامه فقط في اللغة الإنجليزية + الأرقام أو الافتتاحية) <br> English EnderScore أو الأرقام-> كلمة المرور: (الأرقام الإنجليزية + أو السفلية ، الطول لا يقل عن 6) <br> <input type = "text" id = "password"/> qq: <br> <input type = "text" id = "qq"/> <br> بطاقة المعرف: <br> <input type = "text" id = "uid"/> <br> <branty type = "button" value = "president" onClick = "addradin () id = "btn_update"> <input type = "button" value = "cancel" onClick = "HideadDinput ()"> </form> </viv> </center> </body> </html>
رمز JS:
var row = 0 ؛ // تحديد العدد العالمي للصفوف لتعديل var reg_email = /^/w+(-/w+)|(/./w+)*)*)**/bududa-za-z0-9/90 (((((|-) Bududa-za-Z0-9/90-90-0)*. // تستخدم للحكم على تنسيق صندوق البريد var reg_name =/^((/w*/d/w*[az]/w*) | (/w*[az]/w*/d/w*)) $/i ؛ // تستخدم للحكم على تنسيق اسم المستخدم var reg_chinese =/^[/u0391-/uffe5]+$/؛ // المستخدمة للحكم على تنسيق الاسم var reg_pass =/^(/w*/d/w*[az]/w*) | (/w*[az]/w*/d/w*)) $/i ؛ // استخدم لتحديد تنسيق كلمة المرور // --- الحصول على رقم الخط --- وظيفة getrow (r) إرجاع I ؛} // --- احصل على رقم السطر ---- // ---- حذف سطر معين ------- دالة delrow (r) { document.getElementById('table').deleteRow(getRow(r));}//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementById ('username'). value = '' ؛ document.getElementById ('كلمة المرور'). value = '' ؛ document.getElementById ('name'). value = '' ؛ document.getElementById ('البريد الإلكتروني'). value = '' ؛ document.getElementById ('phone'). value = '' ؛ document.getElementById ('phone'). value = '' ؛ document.getElementById ('qq'). value = '' ؛ document.getElementById ('uid'). value = '' ؛} // ---- lead محتوى مربع المعلومات إضافة ------/----------- إظهار مربع إضافة معلومات ------------- وظيفة showaddinput () {document.getElementById ('addinfo'). style = "display: block-inline" ؛ document.getElementById ('btn_add'). style = "display: block-inline" ؛ document.getElementById ('btn_update'). style = "display: none" ؛ cleanaddinput () ؛ } // ---- إظهار مربع إضافة المعلومات -------/--إخفاء إضافة مربع المعلومات ------ الوظيفة HideadDinput () {document.getElementById ('addinfo'). style = "display: none" ؛} // --- إخفاء معلومات إضافة معلومات Box----/------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- email = document.getElementById ('البريد الإلكتروني'). القيمة ؛ var phone = document.getElementById ('phone'). value ؛ var qq = document.getElementById ('qq'). value ؛ var uid = document.getElementById ('uid'). value ؛ var judge = true ؛ // المستخدمة لتحديد ما إذا كانت معلومات النموذج تلبي إذا (اسم المستخدم == '') {judge = false ؛ تنبيه ("الرجاء إدخال اسم المستخدم") ؛ } آخر إذا (password == '') {judge = false ؛ تنبيه ("الرجاء إدخال كلمة المرور") ؛ } آخر إذا (name == '') {judge = false ؛ تنبيه ("الرجاء إدخال اسمك") ؛ } آخر إذا (البريد الإلكتروني == '') {judge = false ؛ تنبيه ("الرجاء إدخال بريدك الإلكتروني") ؛ } آخر إذا (phone == '') {judge = false ؛ تنبيه ("الرجاء إدخال هاتفك") ؛ } آخر إذا (uid == '') {judge = false ؛ تنبيه ("الرجاء إدخال بطاقة الهوية الخاصة بك") ؛ } آخر إذا (uid.length! = 18) {judge = false ؛ تنبيه ("الرجاء إدخال بطاقة الهوية الخاصة بك") ؛ } آخر إذا (uid.length! = 18) {judge = false ؛ التنبيه ("يجب أن تكون بطاقة الهوية 18 رقمًا ، يرجى ملء بشكل صحيح") ؛ } آخر إذا (qq.length <= 5 && qq.length> = 13) {judge = false ؛ التنبيه ("الرجاء إدخال رقم QQ بشكل صحيح") ؛ } آخر إذا (phone.length <3 && qq.length> 12) {judge = false ؛ تنبيه ("الرجاء إدخال الهاتف بشكل صحيح") ؛ } آخر if (! reg_email.test (البريد الإلكتروني)) {judge = false ؛ التنبيه ("تنسيق البريد الإلكتروني غير صحيح") ؛ } آخر إذا (! reg_name.test (اسم المستخدم)) {judge = false ؛ تنبيه ("تنسيق اسم المستخدم غير صحيح") ؛ } آخر إذا (! reg_chinese.test (name)) {judge = false ؛ التنبيه ("تنسيق الاسم غير صحيح") ؛ } آخر إذا ((! reg_pass.test (كلمة المرور)) || password.length <6) {judge = false ؛ التنبيه ("تنسيق كلمة المرور غير صحيح") ؛ } إرجاع القاضي ؛} // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementById ('كلمة المرور'). القيمة ؛ arr [2] = document.getElementById ('name'). value ؛ arr [3] = document.getElementById ('البريد الإلكتروني'). القيمة ؛ arr [4] = document.getElementById ('phone'). value ؛ arr [5] = document.getElementById ('QQ'). القيمة ؛ arr [6] = document.getElementById ('uid'). القيمة ؛ arr [7] = "<a style = 'text-align: center ؛ color: Blue ؛ المؤشر: مؤشر ؛' onClick = 'Updaterow (this) ؛'> modify </a> <a style = 'text-align: center ؛ color: blue ؛ cursor: pointer ؛' onClick = 'delrow (this) ؛'> delete </a> "؛ var x = document.getElementById ('table'). inserTrow (1) ؛ // احصل على كائن الصف الأول لـ (var i = 0 ؛ i <arr.length ؛ i ++) {x.insertcell (i) .innerhtml = arr [i] ؛ // أدخل كل بيانات في كل عمود من الصف الأول مع حلقة} } // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- // إظهار زر التعديل // إرسال زر استبدال المستند. document.getElementById ('btn_update'). style = "display: block-inline" ؛ insertInputFromquery (QueryInfobyrow (row)) ؛ } // ---- تعديل المعلومات بناءً على رقم السطر ----/// ------ ملف QueryInFobyrow (r) {var arr = new array () ؛ لـ (var m = 0 ؛ m <7 ؛ m ++) {arr [m] = document.getElementById ('table'). صفوف [row] .cells [m] .innertext ؛ } إرجاع arr ؛ // إرجاع بيانات هذا خط}//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementById ('البريد الإلكتروني'). value = arr [3] ؛ document.getElementById ('phone'). value = arr [4] ؛ document.getElementById ('qq'). value = arr [5] ؛ document.getElementById ('uid'). value = arr [6] ؛ } // ---- ضع معلومات الاستعلام في النموذج المعدل ---- function updateInfo () {if (judge () == true) {alert ('modified bantaived') ؛ document.getElementById ('table'). deleterow (row) ؛ // حذف الخط الأصلي insertinfo () ؛ // إدراج القيمة المعدلة hideaddinput () ؛ // hideaddinput () ؛ // hideaddmodule} آخر {Alert ('فشل التعديل') ؛ hideaddinput () ؛ }}ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.