요구 사항은 다음과 같습니다.
사용자 이름, 비밀번호, 이름, 이메일, 전화 번호, QQ 및 ID 번호를 포함하여 사용자 정보를 저장하는 양식으로 HTML 페이지를 작성하십시오.
이제 JS (Just Memory Operations)를 통해 테이블을 동적으로 추가, 삭제, 수정 및 확인해야합니다.
먼저 JS를 사용하여 페이지를로드 할 때 3 개의 초기화 레코드를로드하십시오.
레코드를 추가 할 수있는 버튼이 있으며 클릭 한 후 DIV 레이어가 팝업되어 입력을 제공하여 각 필드가 입력 형식을 준수해야하며 비어질 수 없습니다.
사용자 이름 : 영어 + 번호 + 밑줄;
비밀번호 : 영어 + 숫자 + 밑줄 + 6 이상;
이름 : 중국어;
이메일, 전화 번호, QQ 및 ID 번호는 형식을 충족합니다.
각 레코드는 수정 또는 삭제됩니다.
유사하게 추가하여 추가로 수정하고 원래 값을 읽으십시오.
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/javascript = "utf-8"> <br/> <br/> <h2> js add-to-deletion v1.0 </h2> <br/> <br/> <a href = "javaScript : showaddInput ();"> 데이터 추가 </a> <br/> <br/> <div> <table <scryt : "id ="table "<th> usernen <thern <thern <th> </th> <th> email </th> <th> tel </th> <th> qq </th> <th> Identity Card Number </th> <th> Operation </th> </tr> <td> <td> a1 <td> <td> 123 </td> <td> <td> [email protected] </td> <td> 123456789 </td> <td> 40040044 </td> <td> 270205197405213513 </td> <td> <A Style = "색상 : 파란색; 커서;" onclick = "Updaterow (this);" > 수정 <a> <a Style = "색상 : 파란색; 커서 : 포인터;" onclick = "delrow (this);"> delete </a> </a> </a> </td> </tr> <td> <td> a2 </td> <td> 456 </td> <td> b </td> <td> b </td> <td> bec.com </td> <td> 987654321 </td> <td> 30030033 </td> <td> 470205197405213513 </td> <td> <A Style = "Color : Blue; Cursor : 포인터;" onclick = "updaterow (this);"> modify <a> <a Style = "color : blue; cursor : 포인터;" onclick = "delrow (this);"> delete </a> </a> </a> </td> </tr> <td> <td> a3 </td> <td> 789 </td> <td> c </td> <td> c </td> <td> [email protected] <td> 800800820 </td> 300330303030820 <td> 570205197405213513 </td> <td> <A Style = "Color : Blue; Cursor : 포인터;" onclick = "updateRow (this);"> modify </a> </a> </a> </a> </a> </a> </a> </a> </td> </tr> </div> <div style = "display : none"id = "addInfo"> <corm> <br> 사용자 이름 : (사용자 이름은 영어 + 숫자 또는 밑줄에서만 사용될 수 있음) <br> ind = "<br> <!-<sonter" 영어 밑줄 또는 숫자-> 비밀번호 : (영어 + 숫자 또는 밑줄, 길이, 길이는 6 세 이상) <br> <input type = "text"id = "password"/> <br> 이름 : (중국어 만) <br> <input type "id ="id = "name"/> <br> 이메일 : <br> <input type = "text"id = "tilt" id = "phone"/> <br> qq : <br> <input type = "text"id = "qq"/> <br> id card : <br> <입력 유형 = "text"id = "uid"/> <br> <br> <입력 유형 = "button"value = "onclick ="addinfo () "id ="btn_add "> input type ="btn_add "> onclick = "updateInfo ()"style = "display : none"id = "btn_update"> <input type = "button"value = "cancel"onclick = "hideaddinput ()"> </div> </center> </body> </html>
JS 코드 :
var row = 0; // var reg_email = /^/w+((-/w+)*(/./w+) )*/@@a-za-z0-9 re+((/.|-)..A-Za-Z0-9] +)*/-za-z0-9호]+; // 사서함 형식을 판단하는 데 사용됩니다 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) {var i = r.parentnode.parent.rowindex; 반환 i;} // --- 줄 번호를 얻으십시오 ---- // ---- 특정 줄을 삭제합니다 ------- 기능 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 ( '전화'). value = ''; document.getElementById ( '전화'). value = ''; document.getElementById ( 'qq'). value = ''; document.getElementById ( 'uid'). value = '';} // ---- 정보 추가 상자의 내용을 지우십시오 ------/---------- 정보 추가 상자 표시 ------------ function.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 ( '전화'). 값; var qq = document.getElementById ( 'qq'). 값; var uid = document.getElementById ( 'uid'). 값; var judge = true; // 양식 정보가 (username == '')를 충족하는지 여부를 결정하는 데 사용됩니다. {judge = false; Alert ( '사용자 이름을 입력하십시오'); } else if (password == '') {judge = false; 경고 ( '비밀번호를 입력하십시오'); } else if (name == '') {judge = false; 경고 ( '이름을 입력하십시오'); } else if (email == '') {judge = false; 경고 ( '이메일을 입력하십시오'); } else if (전화 == '') {judge = false; 경고 ( '전화를 입력하십시오'); } else if (uid == '') {judge = false; 경고 ( 'ID 카드를 입력하십시오'); } else if (uid.length! = 18) {judge = false; 경고 ( 'ID 카드를 입력하십시오'); } else if (uid.length! = 18) {judge = false; Alert ( 'Identity Card는 18 자리이어야합니다. 올바르게 작성하십시오'); } else if (qq.length <= 5 && qq.length> = 13) {judge = false; 경고 ( 'QQ 번호를 올바르게 입력하십시오'); } else if (전화. length <3 && qq.length> 12) {judge = false; 경고 ( '전화를 올바르게 입력하십시오'); } else if (! reg_email.test (email)) {judge = false; Alert ( '이메일 형식이 잘못되었습니다'); } else if (! reg_name.test (username)) {judge = false; alert ( '사용자 이름 형식이 잘못되었습니다'); } else if (! reg_chinese.test (name)) {judge = false; Alert ( '이름 형식이 잘못되었습니다'); } else if ((! reg_pass.test (password)) || password.length <6) {judge = false; Alert ( '비밀번호 형식이 잘못되었습니다'); } return judge ;}//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ document.getElementById ( 'password'). 값; ARR [2] = document.getElementById ( 'name'). 값; ARR [3] = document.getElementById ( '이메일'). 값; ARR [4] = document.getElementById ( '전화'). 값; ARR [5] = Document.getElementById ( 'QQ'). 값; ARR [6] = document.getElementById ( 'uid'). 값; ARR [7] = "<a Style = 'Text-Align : Center; Color : Blue; Cursor : Pointer;' 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_add')를 바꾸려는 제출 버튼. 스타일 = "display : none"; document.getElementById ( 'btn_update'). style = "display : block-inline"; insertInputFromQuery (QueryInfobyrow (row)); } // ---- 줄 번호에 따라 정보를 수정합니다 ---- // ------ 파일 QueryInfobyrow (r) {var arr = new array (); for (var m = 0; m <7; m ++) {arr [m] = document.getElementById ( 'table'). 행 [row] .Cells [m] .innerText; } rack arr; // 이것의 데이터를 반환합니다 선}//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementById ( 'email'). value = arr [3]; document.getElementById ( '전화'). value = arr [4]; document.getElementById ( 'qq'). value = arr [5]; document.getElementById ( 'uid'). value = arr [6]; } // ---- 쿼리 정보를 수정 된 양식에 넣습니다 ---- 함수 updateInfo () {if (judge () == true) {alert ( 'modified success'); document.getElementById ( 'table'). deleterow (row); // 원래 줄 insertInfo ()를 삭제합니다. // 수정 된 값 삽입 hideadDinput (); // hideaddinput (); // hideaddmodule} else {alert ( '수정 실패'); HideadDinput (); }}위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.