ホームページ > 記事 > ウェブフロントエンド > JS を使用した HTML テーブルの追加、削除、変更
要件は次のとおりです:
ユーザー名、パスワード、名前、電子メール、電話番号、QQ、ID 番号などのユーザー情報を保存するためのテーブルを含む HTML ページを作成します。
次に、js を使用してテーブルを動的に追加、削除、変更、確認する必要があります (メモリ操作のみ)。
まず、ページをロードするときに js を使用して 3 つの初期化レコードをロードします
レコードを追加するボタンと div があります。クリックするとレイヤーが表示されます。各フィールドは入力形式に準拠している必要があり、空にすることはできません:
ユーザー名: 英語 + 数字 + 下線 + 6 桁以上の数字;
名前: 中国語;
電子メール、電話、QQ、ID カードの形式に準拠します。
各レコードには変更と削除があり、元の値を読み出す必要があります。
HTML ページ コード:
js コード:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>js增删改 v1.0</title> <script src="js/test.js" type="text/javascript" charset="utf-8"></script> </head> <body > <center> <br/><br/> <h2>js增删改 v1.0</h2> <br/><br/> <a href="javascript:showAddInput();">添加数据</a> <br/><br/> <div class="table" > <table border="1" style="text-align:center" id="table"> <tr> <th>用户名</th> <th>密码</th> <th>姓名</th> <th>邮箱</th> <th>电话</th> <th>qq</th> <th>身份证号</th> <th>操作</th> </tr> <tr> <td>A1</td> <td>123</td> <td>a</td> <td>a@qq.com</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);">删除</a></td> </tr> <tr> <td>A2</td> <td>456</td> <td>b</td> <td>b@qq.com</td> <td>987654321</td> <td>30030033</td> <td>470205197405213513 </td> <td><a style="color:blue;cursor:pointer;" onclick="updateRow(this);">修改<a> <a style="color:blue;cursor:pointer;" onclick="delRow(this);">删除</a></td> </tr> <tr> <td>A3</td> <td>789</td> <td>c</td> <td>c@qq.com</td> <td>800800820</td> <td>30030030</td> <td>570205197405213513 </td> <td><a style="color:blue;cursor:pointer;" onclick="updateRow(this);">修改<a> <a style="color:blue;cursor:pointer;" onclick="delRow(this);">删除</a></td> </tr> </table> </div> <div style="display:none" id="addinfo"> <form> <br> 用户名:(用户名只能用英文+数字或下划线)<br><input type="text" id="username" /><br><!--限制用户名只能用英文 下划线 或数字--> 密码:(英文+数字或下划线,长度不小于6)<br><input type="text" id="password"/><br> 姓名:(只能是汉字)<br><input type="text" id="name"/><br> 邮箱:<br><input type="text" id="email"/><br> 电话:<br><input type="text" id="phone"/><br> qq:<br><input type="text" id="qq"/><br> 身份证:<br><input type="text" id="uid"/><br><br> <input type="button" value="提交" onclick="addInfo()" id="btn_add"> <input type="button" value="提交" onclick="updateInfo()" style="display:none" id="btn_update"> <input type="button" value="取消" onclick="hideAddInput()"> </form> </div> </center> </body> </html>
上記がこの記事の全内容です。お役に立てば幸いです。皆さんの学習は役に立ちました。皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。
JS を使用した HTML テーブルの追加、削除、変更に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。