要件は次のとおりです。
ユーザー名、パスワード、名前、電子メール、電話番号、QQ、ID番号など、ユーザー情報を保存するフォームのHTMLページを記述します。
次に、JSを介してテーブルを動的に追加、削除、変更、確認する必要があります（メモリ操作のみ）。
まず、JSを使用して、ページをロードするときに3つの初期化レコードをロードします。
レコードを追加するボタンがあり、クリックした後、Divレイヤーがポップアップして入力を提供するため、各フィールドが入力形式に準拠し、空にすることができないことを要求します。
ユーザー名：英語 +番号 +アンダースコア;
パスワード：英語 +ディジット +アンダースコア + 6以上。
名前：中国語;
電子メール、電話番号、QQ、およびID番号は形式を満たします。
各レコードは変更または削除されます。
同様に変更して追加し、元の値を読み取ります。
HTMLページコード：
<html> <head> <メタhttp-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> js add-to-deliotion v1.0 </title> <scrip = "js/test.js" type = "text/javascript =" utf-8 "> </< <br//> <br/> <h2> js Add-to-to-to-to-to-to-to-to-to-to-to-to-to-to-to-to-to-to-to-to-to-to-to-to-to-to-to-br/> <br/> <a href = "javascript：showaddinput（）;"> <br/> <br/> <br/> <div> <テーブルスタイル= " <th> name </th> <th> email </th> <th> tel </th> <th> qq </th> <th> IDカード番号</th> <th>操作</th> </tr> <tr> <td> a1 </td> <td> 123 </td> <td> a </td> <td> </td> <td> 123456789 </td> <td> 40040044 </td> <td> 270205197405213513 </td> <td> <a style = "color：blue; cursor：pointer;" onclick = "updaterow（this）;" >変更<a> <a style = "color：blue; cursor：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> 9874321 </td> <td> 30030033 </td> <td> 470205197405213513 </td> <td> <a style = "color：blue; cursor：pointer;" onclick = "updaterow（this）;"> modify <a> <a style = "color：blue; cursor：pointer;" onclick = "delrow（this）;"> delete </a> </td> </tr> <tr> <td> a3 </td> <td> 789 </td> <td> c </td> <td> <td> 570205197405213513 </td> <td> <a style = "color：blue; cursor：pointer;" onclick = "updaterow（this）;"> modify </a> </td> </tr> </table> </div> <div style = "display：none" addinfo "> <form> <br> username：（usernameは英語 +数字またはアンダースコアでのみ使用できます）アンダースコアまたは数字 - >パスワード：（英語 +番号またはアンダースコア6）<br> <入力タイプ= "テキスト" id = "パスワード"/> <br> name ：（漢字のみ）<br> <入力タイプ= "テキスト" id = "name"/> <br> email：<br> <入力タイプ= "テキスト" ID = "/> <br> <br> <br> <br> <br> <br> <br> QQ：<br> <入力タイプ= "text" id = "qq"/> <br> idカード：<br> <入力タイプ= "テキスト" id = "uid"/> <br> <br> <入力タイプ= "ボタン" value = "onclick =" addInfo（） "id =" btn_add "> <入力=" "onclick =" "onclick =" "onclick =" "onclick =" "onclick =" inclick = id = "btn_update"> <入力型= "ボタン" value = "cancel" onclick = "hideaddinput（）"> </form> </div> </center> </body> </html>
JSコード：
var row = 0; // var reg_email = /^/w+((--/w+）(/./w+）(/./w+）(/ Za-z0-9] +(/.1m-) [a-za-z0-9] +/.prient/.priment/._._._a-za-z0-9] +/. [a-za-z0-9] +********/.fy 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; return 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（ 'Phone'）。value = ''; document.getElementById（ 'Phone'）。value = ''; document.getElementById（ 'qq'）。value = ''; document.getElementById（ 'uid'）。value = '';} // ----追加情報ボックスのコンテンツをクリア-----/----------------------関数showaddinput（）{document.getElementById（ 'addInfo'）。スタイル= "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（ 'Email'）。value; var phone = document.getElementById（ 'Phone'）。value; var qq = document.getElementById（ 'qq'）。value; var uid = document.getElementById（ 'uid'）。value; var Judge = true; //フォーム情報がif（username == ''）を満たすかどうかを判断するために使用されます{裁判官= false;アラート（ 'ユーザー名を入力してください'）; } else if（password == ''）{裁判官= false;アラート（「パスワードを入力してください」）; } else if（name == ''）{裁判官= false;アラート（「名前を入力してください」）; } else if（email == ''）{裁判官= false;アラート（「メールを入力してください」）; } else if（phone == ''）{裁判官= false;アラート（「電話を入力してください」）; } else if（uid == ''）{裁判官= false;アラート（ 'IDカードを入力してください'）; } else if（uid.length！= 18）{裁判官= false;アラート（ 'IDカードを入力してください'）; } else if（uid.length！= 18）{裁判官= false;アラート（ 'IDカードは18桁である必要があります。正しく記入してください'）; } else if（qq.length <= 5 && qq.length> = 13）{裁判官= false;アラート（ 'QQ番号を正しく入力してください'）; } else if（phone.length <3 && qq.length> 12）{裁判官= false;アラート（「電話を正しく入力してください」）; } else if（！reg_email.test（email））{裁判官= false; alert（ '電子メール形式が正しくない'）; } else if（！reg_name.test（username））{裁判官= false; alert（ 'usernameフォーマットは間違っています'）; } else if（！reg_chinese.test（name））{裁判官= false; alert（ 'name Format is scorrect'）; } else if（（！reg_pass.test（password））|| password.length <6）{裁判官= false; alert（ 'パスワード形式が正しくない'）; } return judge ;}//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ document.getElementById（ 'password'）。value; arr [2] = document.getElementById（ 'name'）。value; arr [3] = document.getElementById（ 'email'）。value; arr [4] = document.getElementById（ 'Phone'）。value; arr [5] = document.getElementById（ 'qq'）。value; arr [6] = document.getElementById（ 'uid'）。value; 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_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'）。rows [row] .cells [m] .innertext; } return arr; //これのデータを返します ライン}// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementById（ 'Email'）。value = arr [3]; document.getElementById（ 'Phone'）。value = arr [4]; document.getElementById（ 'QQ'）。value = arr [5]; document.getElementById（ 'uid'）。value = arr [6]; } // ----クエリ情報を変更されたフォームに配置します---- function updutinginfo（）{if（judg（）== true）{alert（ 'Modified ussultfuly'）; document.getElementById（ 'table'）。leleterow（row）; //元の行Insertinfo（）を削除します。 //変更された値を挿入してくださいhideaddinput（）; // hideaddinput（）; // hideaddmodule} else {alert（ 'Modification failed'）; hideaddinput（）; }}上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。