JavaScript 入門JavaScript は軽量なインタープリタ型の Web 開発言語です。言語システムはあまり複雑ではなく、シンプルで習得しやすいです。最新のブラウザにはすべて JavaScript エンジンが組み込まれているため、JavaScript ソース コードはブラウザ内で直接解釈および実行でき、ユーザーはサポートの問題を心配する必要がありません。これは、js を使い始めるための小さな演習です。 テーブル情報の追加と削除シンプルな DOM 操作 HTML タグを実現できます。コードは次のとおりです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル タイプ="text/css"> *{ マージン: 0; パディング: 0; } </スタイル> <script type="text/javascript"> 関数delA(){ // ハイパーリンクをクリックするとその行が削除されます // これを使用して親要素を削除します var tr = this.parentNode.parentNode; //削除する人の名前を取得します。var name=tr.getElementsByTagName("td")[0].innerHTML; // ユーザーに削除するかどうかを尋ねます var flag=confirm(""+name+" を削除しますか?"); if(フラグ){ tr の親ノードから子ノードを削除します。 } //新しいタブのポップアップなどのブラウザのデフォルトの動作を防止します。false を返します。 } window.onload = 関数(){ //ハイパーリンクをクリックして従業員の情報を削除します //リンクを取得します var allA=document.getElementsByTagName("a"); //応答関数をバインドする for(var i=0;i<allA.length;i++){ allA[i].onclick=delA; } //従業員機能を追加し、ボタンをクリックしてテーブルに情報を追加します var addEmpButton = document.getElementById("addEmpButton"); addEmpButton.onclick=関数(){ //入力ボックスのテキスト コンテンツを取得します。var empName=document.getElementById("empName").value; var email = document.getElementById("email").value; var 給与=document.getElementById("給与").value; //trを作成する var tr = document.createElement("tr"); //tr にコンテンツを追加 tr.innerHTML="<td>"+empName+"</td>"+ "<td>"+メール+"</td>"+ 「<td>"+給料+"</td>"+ "<td><a href='javascript:;'>削除</a></td>"; var a = tr.getElementsByTagName("a")[0]; a.onclick=delA; // テーブルに tr を配置します var employeeTable=document.getElementById("employeeTable"); //tbody を取得 var tbody = document.getElementsByTagName("tbody")[0]; tr の子要素を追加します。 } } </スクリプト> </head> <本文> <テーブル id="従業員テーブル"> <tr> <th>名前</th> <th>メール</th> <th>給与</th> <th> </th> </tr> <tr> <td>トム</td> <td>[email protected]</td> <td>5000</td> <td><a href="">削除</a></td> </tr> <tr> <td>ジェリー</td> <td>[email protected]</td> <td>8000</td> <td><a href="">削除</a></td> </tr> <tr> <td>ボブ</td> <td>[email protected]</td> <td>10000</td> <td><a href="">削除</a></td> </tr> <div id="formDiv"> <h4>新しいスタッフを追加する</h4> <テーブル> <tr> <td class="word">名前: </td> <td class="inp"> <input type="text" name="empName" id="empName"> </td> </tr> <tr> <td class="word">メールアドレス: </td> <td class="inp"> <input type="text" name="email" id="email"> </td> </tr> <tr> <td class="word">給与: </td> <td class="inp"> <input type="text" name="給与" id="給与"> </td> </tr> <tr> <td colspan="2" align="center"> <!--colspan 属性と rowspan 属性は、セルがまたがる行数と列数です --> <!--align 属性はテキストの配置位置です --> <ボタン id="addEmpButton" 値="abc"> 提出する </ボタン> </td> </tr> </テーブル> </div> </テーブル> </本文> </html> コード スニペット内のコメントは非常に明確で、練習に適しています。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Docker 入門インストールチュートリアル (初心者版)
>>: CentOS 6.6 ソースコードのコンパイルと MySQL 5.7.18 のインストールチュートリアルの詳細な説明
Mac オペレーティングシステムで MYSQL データベースのパスワードを忘れた場合の簡単な解決策1...
Ubuntu でサービスを作成し、自動的に起動する方法: 1. [/lib/systemd/syst...
目次1. ファイル拡張子を取得する2. コンテンツをクリップボードにコピーする3. スリープ時間は何...
この記事の例では、Vueの具体的なコードを共有し、zipファイルをダウンロードして参考にしています。...
画像タグは、Web ページに画像を表示するために使用されます。 HTML/XHTML 画像 <...
PCIE には 4 つの異なる仕様があります。下の図でそのうちの 2 つを見てみましょう。マザーボー...
コンテンツ属性は通常、::before および ::after 疑似要素で使用され、疑似要素のコンテ...
1. ツール今必要なツールは2つあります: MySQLサーバー (mysql-5.7.18)、MyS...
今日は、CSS を使用して左上の三角形を記述するいくつかの方法を紹介します。概略図(幅と高さを60p...
MySQL 5.7.13 Mac用インストールチュートリアル、非常に詳細で、以下のように記録されてい...
この記事では、Windows プラットフォームで ogg プログラムを監視する方法を紹介します。 (...
目次ステップ1: CentOS 8でパッケージを更新するステップ2: CentOS 8にNginx ...
何?何のスターコートですか?さて、もっとわかりやすくするために写真を見てみましょう。 よく見ると、パ...
ローカル データベースがサーバー データベースに接続されているときに発生する 1045 の問題を解決...
目次序文1. Dockerをインストールする2. Dapr CLIをインストールする3. Net6 ...