ホームページ >ウェブフロントエンド >jsチュートリアル >JS を使用した HTML テーブルの追加、削除、変更

JS を使用した HTML テーブルの追加、削除、変更

高洛峰オリジナル: 2017-01-07 10:15:021973ブラウズ

要件は次のとおりです:

ユーザー名、パスワード、名前、電子メール、電話番号、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 サイトに注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ピュアネイティブjsでテーブルテーブルの追加・削除を実現次の記事：ピュアネイティブjsでテーブルテーブルの追加・削除を実現

続きを見る

JS を使用した HTML テーブルの追加、削除、変更

関連記事