ข้อกำหนดมีดังนี้:
เขียนหน้า HTML ด้วยแบบฟอร์มที่เก็บข้อมูลผู้ใช้รวมถึง: ชื่อผู้ใช้รหัสผ่านชื่ออีเมลหมายเลขโทรศัพท์ QQ และหมายเลข ID
ตอนนี้เราต้องเพิ่มลบแก้ไขและตรวจสอบตารางผ่าน JS (เพียงแค่การดำเนินการหน่วยความจำ):
ขั้นแรกให้ใช้ JS เพื่อโหลดบันทึกการเริ่มต้น 3 บันทึกเมื่อโหลดหน้า;
มีปุ่มเพื่อเพิ่มระเบียนและหลังจากคลิกเลเยอร์ div จะปรากฏขึ้นเพื่อให้อินพุตกำหนดให้แต่ละฟิลด์จะต้องสอดคล้องกับรูปแบบอินพุตและไม่สามารถว่างเปล่า:
ชื่อผู้ใช้: ภาษาอังกฤษ + หมายเลข + ขีดล่าง;
รหัสผ่าน: ภาษาอังกฤษ + ตัวเลข + ขีดล่าง + 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/javascript <br/> <br/> <h2> js เพิ่มไปยังการลบ v1.0 </h2> <br/> <br/> <a href = "JavaScript: showadDinput ();"> เพิ่มข้อมูล </a> <br/> <br/> <div> <th> ชื่อ </th> <th> อีเมล </th> <th> โทร </th> <th> qq </th> <th> หมายเลขบัตรประจำตัว </th> <th> การดำเนินการ </th> </tr> <tr> <td> a1 </td> <td> 123 </td> <td> <td> 123456789 </td> <td> 40040044 </td> <td> 270205197405213513 </td> <td> <a style = "สี: สีน้ำเงิน; เคอร์เซอร์: ตัวชี้;" onclick = "updaterow (นี่);" > แก้ไข <a> <a style = "สี: สีน้ำเงิน; เคอร์เซอร์: ตัวชี้;" onclick = "delrow (this);"> ลบ </a> </td> </tr> <tr> <td> a2 </td> <td> 456 </td> <td> b </td> <td> b </td> <td> [email protected] </td> <td> <TD> 30030033 </td> <TD> 470205197405213513 </td> <td> <a style = "สี: สีน้ำเงิน; เคอร์เซอร์: ตัวชี้;" onclick = "updaterow (นี่);"> แก้ไข <a> <a style = "สี: สีน้ำเงิน; เคอร์เซอร์: ตัวชี้;" onclick = "delrow (this);"> ลบ </a> </td> </tr> <tr> <td> a3 </td> <td> 789 </td> <td> c </td> <td> c </td> <td> [email protected] </td> <td> <td> 570205197405213513 </td> <td> <a style = "สี: สีน้ำเงิน; เคอร์เซอร์: ตัวชี้;" onclick = "updaterow (this);"> แก้ไข </a> </td> </tr> </table> </div> <div style = "จอแสดงผล: ไม่มี" id = "addinfo"> <borm> <br> ชื่อผู้ใช้: (ชื่อผู้ใช้สามารถใช้ในภาษาอังกฤษได้เท่านั้น ภาษาอังกฤษขีดล่างหรือตัวเลข-> รหัสผ่าน: (ภาษาอังกฤษ + ตัวเลขหรือขีดล่างความยาวไม่น้อยกว่า 6) <br> <ประเภทอินพุต = "ข้อความ" id = "รหัสผ่าน"/> <br> ชื่อ: (เฉพาะอักขระภาษาจีน) <br> <อินพุต type = "text" id = "ชื่อ"/> <br> อีเมล: <br> <br> qq: <br> <อินพุต type = "text" id = "qq"/> <br> บัตรประจำตัว: <br> <อินพุต type = "text" id = "uid"/> <br> <br> <input type = "button" value = "ส่ง" onClick = "addInfo () id = "btn_update"> <อินพุต type = "ปุ่ม" value = "ยกเลิก" onclick = "hideadDinput ()"> </form> </div> </enter> </body> </html>
รหัส JS:
var row = 0; // กำหนดจำนวนแถวทั่วโลกที่จะแก้ไข var reg_email = /^/w+((-/w+)|(/./w+))/@ [aterta-za-z0-9like+((/eth // ใช้เพื่อตัดสินรูปแบบกล่องจดหมาย 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) return i;} // --- รับหมายเลขบรรทัด ---- // ---- ลบบรรทัดหนึ่ง ------- ฟังก์ชั่น delrow (r) { document.getElementById ('ตาราง'). deleterow (getrow (r));} // ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementById ('ชื่อผู้ใช้'). value = ''; document.getElementById ('รหัสผ่าน'). value = ''; document.getElementById ('ชื่อ'). value = ''; document.getElementById ('อีเมล'). value = ''; document.getElementById ('โทรศัพท์'). value = ''; document.getElementById ('โทรศัพท์'). value = ''; document.getElementById ('qq'). value = ''; document.getElementById ('uid'). value = '';} // ---- ล้างเนื้อหาของกล่องข้อมูลเพิ่ม ------/---------- แสดงกล่องข้อมูลเพิ่ม ------------- ฟังก์ชั่น showaddinput () {document.getElementById ('AddInfo') document.getElementById ('btn_add'). style = "display: block-inline"; document.getElementById ('btn_update'). style = "แสดง: ไม่มี"; cleanaddinput (); } // ---- แสดงกล่องข้อมูลเพิ่ม ------/---- ซ่อนเพิ่มกล่องข้อมูล ------ ฟังก์ชั่น hideadDinput () {document.getElementById ('AddInfo'). style = "แสดง: ไม่มี";} // ---- ซ่อนข้อมูลเพิ่ม กล่อง ----/---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementById ('อีเมล') ค่า; var phone = document.getElementById ('โทรศัพท์') ค่า; var qq = document.getElementById ('qq') ค่า; var uid = document.getElementById ('uid') ค่า; var judge = true; // ใช้เพื่อตรวจสอบว่าข้อมูลแบบฟอร์มตรงกับ (ชื่อผู้ใช้ == '') {judge = false; การแจ้งเตือน ('โปรดป้อนชื่อผู้ใช้'); } อื่นถ้า (รหัสผ่าน == '') {judge = false; การแจ้งเตือน ('โปรดป้อนรหัสผ่าน'); } อื่นถ้า (name == '') {judge = false; การแจ้งเตือน ('โปรดป้อนชื่อของคุณ'); } อื่นถ้า (email == '') {judge = false; การแจ้งเตือน ('โปรดป้อนอีเมลของคุณ'); } อื่นถ้า (โทรศัพท์ == '') {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; การแจ้งเตือน ('โปรดป้อนโทรศัพท์อย่างถูกต้อง'); } อื่นถ้า (! reg_email.test (อีเมล)) {judge = false; การแจ้งเตือน ('รูปแบบอีเมลไม่ถูกต้อง'); } อื่นถ้า (! reg_name.test (ชื่อผู้ใช้)) {judge = false; การแจ้งเตือน ('รูปแบบชื่อผู้ใช้ไม่ถูกต้อง'); } อื่นถ้า (! reg_chinese.test (ชื่อ)) {judge = false; การแจ้งเตือน ('รูปแบบชื่อไม่ถูกต้อง'); } อื่นถ้า ((! reg_pass.test (รหัสผ่าน)) || password.length <6) {judge = false; การแจ้งเตือน ('รูปแบบรหัสผ่านไม่ถูกต้อง'); } return Judge;} // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementById ('รหัสผ่าน') ค่า; arr [2] = document.getElementById ('ชื่อ') ค่า; arr [3] = document.getElementById ('อีเมล') ค่า; arr [4] = document.getElementById ('โทรศัพท์') ค่า; arr [5] = document.getElementById ('qq') ค่า; arr [6] = document.getElementById ('uid') ค่า; arr [7] = "<a style = 'text-allign: center; color: Blue; Cursor: Pointer;' onclick = 'updaterow (this);'> แก้ไข </a> <a style = 'text-allign: center; color: Blue; Cursor: Pointer;' onclick = 'delrow (นี่);'> ลบ </a> "; var x = document.getElementById ('ตาราง'). inserTrow (1); // รับวัตถุแถวแรกสำหรับ (var i = 0; i <arr.length; i ++) {x.insertcell (i) .innerhtml = arr [i]; // แทรกแต่ละข้อมูลลงในแต่ละคอลัมน์ของแถวแรกด้วยลูป} - - // แสดงแบบฟอร์มการแก้ไข // ส่งปุ่มเพื่อแทนที่ document.getElementById ('btn_add'). style = "แสดง: ไม่มี"; document.getElementById ('btn_update'). style = "display: block-inline"; InsertInputFromQuery (queryInfobyrow (แถว)); } // ---- แก้ไขข้อมูลตามหมายเลขบรรทัด ---- // ------ ไฟล์ queryinfobyrow (r) {var arr = array ใหม่ (); สำหรับ (var m = 0; m <7; m ++) {arr [m] = document.getElementById ('ตาราง'). แถว [แถว] .cells [m] .innerText; } return arr; // ส่งคืนข้อมูลของสิ่งนี้ เส้น}//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- - document.getElementById ('อีเมล'). value = arr [3]; document.getElementById ('โทรศัพท์'). value = arr [4]; document.getElementById ('qq'). value = arr [5]; document.getElementById ('uid'). value = arr [6]; } // ---- ใส่ข้อมูลการสืบค้นลงในแบบฟอร์มที่แก้ไข ---- ฟังก์ชั่น updateInfo () {ถ้า (judge () == true) {alert ('แก้ไขสำเร็จ'); document.getElementById ('ตาราง'). deleterow (แถว); // ลบบรรทัดดั้งเดิม insertInfo (); // แทรกค่า hideadDinput (); // hideaddinput (); // hideaddModule} else {Alert ('การแก้ไขล้มเหลว'); HideadDinput (); -ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น