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 のインストールチュートリアルの詳細な説明
ダウンロードダウンロードアドレス: https://redis.io/download /usr/l...
1. ファイル名検索を実行するwhich ('実行可能ファイル' を検索) //PA...
バージョン1.4.2公式ドキュメントドッカーハブ起動する環境変数SEATA_CONFIG_NAMEを...
1. まず、サーバーの mysql にアクセスして権限を変更します。 GRANT オプション付きで、...
このステータス コードは、リクエストのステータスに関する情報を提供し、サイトとリクエストされたページ...
<a href="" onclick=""> を...
目次1. 書き込み可能: 書き込み可能2. 列挙可能: 列挙可能3. 設定可能: 設定可能オブジェク...
コンポーネントに背景画像コントロールを追加するには、次の 2 つの手順だけが必要です。 <表示...
テスト環境は、JDBCドライバを使用してMariaDB 5.7でセットアップされています。 <...
フォーム要素はたくさんあります。簡単にまとめると、次のようになります。私のやり方では、主にテキスト ...
ウェブ全体を検索して、さまざまな落とし穴を見つけましたが、問題は解決しませんでした。ついに自分でも分...
この記事では主に、フォント読み込みの最適化に関する一般的な戦略を紹介します。内容の大部分は参考資料と...
・【シーン説明】 HTTP1.1 以降、HTTP プロトコルは永続的な接続 (長い接続とも呼ばれます...
序文まず、TCP 接続を識別する方法を見てみましょう。システムは、(src_ip、src_port、...
序文Dockerを使ってHadoopクラスタを起動するたびに、ネットワークカードの再バインド、IPの...